jquery實作網頁查找功能-js教程-PHP中文網

首頁

web前端

js教程

jquery實作網頁查找功能

不言

Jun 28, 2018 pm 03:19 PM

尋找功能網頁

這篇文章主要介紹了關於jquery實現網頁查找功能，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

當需要在頁面中查找某個關鍵字時，一是可以透過瀏覽器的查找功能實現，二是可以透過前端腳本準確查找定位，本文介紹透過jQuery實現的頁面內容查找定位的功能，並可擴展顯示查找後的相關資訊

本文以查找車站名為例，仿12306官網查找車站售票時間頁面效果，當用戶輸入關鍵字點擊查找按鈕或按回車鍵時，jQuery透過正則匹配內容，準確匹配關鍵字，並迅速將頁面定位捲動到第一個符合的位置，並顯示相關資訊（本例中附加資訊為車站開始售票時間）。

HTML

頁面需要放置一個輸入框用來輸入要找的關鍵字，以及一個尋找按鈕，然後就是主體內容#content，裡麵包含著n個

，即每個時段開售車票的車站名稱。

<p id="search_box"> 
    <input class="textbox" id="searchstr" type="text" size="10" name="searchstr" />　 
    <input class="sbttn" id="search_btn" type="button" value="页内查找" /> 
</p> 
<p id="content"> 
    <p><strong>8：00 起售车站</strong><br /> 
　　安阳、白城、北京西、成都东、大庆、大庆西、东莞、东莞东、惠州、金华南、缙云、九江、兰州、丽水、临汾、南充、 
齐齐哈尔、青田、日照、山海关、汕头、松原、温州、乌兰浩特、乌鲁木齐、武昌、武义、西安、永康、运城。</p> 
    ....此处省略n个p 
</p>

CSS

簡單的對頁面內容進行CSS設置，其中.highlight和#tip分別用來設定查找結果高亮顯示和資訊提示框框顯示的樣式效果，後面我們會介紹到。

#search_box { background: white; opacity: 0.8; text-align:right } 
#search_btn { background: #0f79be; margin-top: 6px; border-radius: 2px; border: 0px;  
width: 100px; line-height: 24px; color: white; } 
#searchstr { font-size: 14px; height: 20px; } 
.highlight { background: yellow; color: red; } 
#tip { background: #ffc; border: 1px solid #999; width: 110px; text-align: center;  
display: none; font-size: 12px; }

jQuery

首先，我們要實作一個固定p的效果，就是當頁面往下拉滾動時，用來尋找的輸入框和按鈕總是固定在頁面的最頂部，方便繼續尋找。

(function($) { 
    $.fn.fixp = function(options) { 
        var defaultVal = { 
            top: 10 
        }; 
        var obj = $.extend(defaultVal, options); 
        $this = this; 
        var _top = $this.offset().top; 
        var _left = $this.offset().left; 
        $(window).scroll(function() { 
            var _currentTop = $this.offset().top; 
            var _scrollTop = $(document).scrollTop(); 
            if (_scrollTop > _top) { 
                $this.offset({ 
                    top: _scrollTop + obj.top, 
                    left: _left 
                }); 
            } else { 
                $this.offset({ 
                    top: _top, 
                    left: _left 
                }); 
            } 
        }); 
        return $this; 
    }; 
})(jQuery);

接著，我們呼叫fixp()。

$(function(){ 
    $("#search_box").fixp({ top: 0 }); 
});

接下來，最關鍵的實作查找功能。當輸入關鍵字後，點擊查找按鈕或按下回車鍵，呼叫查找函數highlight()。

$(function(){ 
    ... 
    $(&#39;#search_btn&#39;).click(highlight);//点击search时，执行highlight函数； 
    $(&#39;#searchstr&#39;).keydown(function (e) { 
        var key = e.which; 
        if (key == 13) highlight(); 
    }) 
    ... 
});

在函數highlight()需要做很多事情，1.清空上次高亮顯示內容，2.隱藏並清空提示信息，3.判斷輸入內容為空的情況，4.獲取輸入的關鍵字，並與頁面內容進行正則匹配，並用flag標記查找到結果，將查找結果高亮顯示，5.根據查找結果的數量，確定提示信息的內容和位置偏移量，準確定位並顯示提示信息。請看具體程式碼：

$(function(){ 
    ... 
    var i = 0; 
    var sCurText; 
    function highlight(){ 
        clearSelection();//先清空一下上次高亮显示的内容； 
        var flag = 0; 
        var bStart = true; 
        $(&#39;#tip&#39;).text(&#39;&#39;); 
        $(&#39;#tip&#39;).hide(); 
        var searchText = $(&#39;#searchstr&#39;).val(); 
        var _searchTop = $(&#39;#searchstr&#39;).offset().top+30; 
        var _searchLeft = $(&#39;#searchstr&#39;).offset().left; 
        if($.trim(searchText)==""){ 
            showTips("请输入查找车站名",_searchTop,3,_searchLeft); 
            return; 
        } 
        //查找匹配 
        var searchText = $(&#39;#searchstr&#39;).val();//获取你输入的关键字； 
        var regExp = new RegExp(searchText, &#39;g&#39;);//创建正则表达式，g表示全局的，如果不用g， 
                  //则查找到第一个就不会继续向下查找了； 
        var content = $("#content").text(); 
        if (!regExp.test(content)) { 
            showTips("没有找到要查找的车站",_searchTop,3,_searchLeft); 
            return; 
        } else { 
            if (sCurText != searchText) { 
                i = 0; 
                sCurText = searchText; 
             } 
        } 
        //高亮显示 
        $(&#39;p&#39;).each(function(){ 
            var html = $(this).html(); 
            //将找到的关键字替换，加上highlight属性； 
            var newHtml = html.replace(regExp, &#39;<span class="highlight">&#39;+searchText+&#39;</span>&#39;); 
            $(this).html(newHtml);//更新； 
            flag = 1; 
        }); 
        //定位并提示信息 
        if (flag == 1) { 
            if ($(".highlight").size() > 1) { 
                var _top = $(".highlight").eq(i).offset().top+$(".highlight").eq(i).height(); 
                var _tip = $(".highlight").eq(i).parent().find("strong").text(); 
                if(_tip=="") _tip = $(".highlight").eq(i).parent().parent().find("strong").text(); 
                var _left = $(".highlight").eq(i).offset().left; 
                var _tipWidth = $("#tip").width(); 
                if (_left > $(document).width() - _tipWidth) { 
                     _left = _left - _tipWidth; 
                } 
                $("#tip").html(_tip).show(); 
                $("#tip").offset({ top: _top, left: _left }); 
                $("#search_btn").val("查找下一个"); 
            }else{ 
                var _top = $(".highlight").offset().top+$(".highlight").height(); 
                var _tip = $(".highlight").parent().find("strong").text(); 
                var _left = $(".highlight").offset().left; 
                $(&#39;#tip&#39;).show(); 
                $("#tip").html(_tip).offset({ top: _top, left: _left }); 
            } 
            $("html, body").animate({ scrollTop: _top - 50 }); 
            i++; 
            if (i > $(".highlight").size() - 1) { 
                i = 0; 
            } 
        } 
    } 
      ... 
});

上述程式碼中提到的clearSelection()函數用來清空高亮效果，程式碼如下：

function clearSelection(){ 
        $(&#39;p&#39;).each(function(){ 
            //找到所有highlight属性的元素； 
            $(this).find(&#39;.highlight&#39;).each(function(){ 
                $(this).replaceWith($(this).html());//将他们的属性去掉； 
            }); 
        }); 
}

最後加上showTips()函數，該函數用來顯示在輸入尋找關鍵字後的尋找結果提示資訊。

$(function(){ 
    var tipsp = &#39;<p class="tipsClass"></p>&#39;;  
    $( &#39;body&#39; ).append( tipsp ); 
    function showTips( tips, height, time,left ){  
        var windowWidth = document.documentElement.clientWidth;  
        $(&#39;.tipsClass&#39;).text(tips); 
        $( &#39;p.tipsClass&#39; ).css({  
        &#39;top&#39; : height + &#39;px&#39;,  
        &#39;left&#39; :left + &#39;px&#39;,  
        &#39;position&#39; : &#39;absolute&#39;,  
        &#39;padding&#39; : &#39;8px 6px&#39;,  
        &#39;background&#39;: &#39;#000000&#39;,  
        &#39;font-size&#39; : 14 + &#39;px&#39;,  
        &#39;font-weight&#39;: 900, 
        &#39;margin&#39; : &#39;0 auto&#39;,  
        &#39;text-align&#39;: &#39;center&#39;,  
        &#39;width&#39; : &#39;auto&#39;,  
        &#39;color&#39; : &#39;#fff&#39;,  
        &#39;border-radius&#39;:&#39;2px&#39;,  
        &#39;opacity&#39; : &#39;0.8&#39; , 
        &#39;box-shadow&#39;:&#39;0px 0px 10px #000&#39;, 
        &#39;-moz-box-shadow&#39;:&#39;0px 0px 10px #000&#39;, 
        &#39;-webkit-box-shadow&#39;:&#39;0px 0px 10px #000&#39; 
        }).show();  
        setTimeout( function(){$( &#39;p.tipsClass&#39; ).fadeOut();}, ( time * 1000 ) );  
    }  
});

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

JQuery實現的圖文自動輪播的效果外掛

以上是jquery實作網頁查找功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python vs. JavaScript：開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型，適合科學計算和數據分析。 2.JavaScript採用弱類型，廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢，選擇時應根據項目需求決定。

Python vs. JavaScript：選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型：1)數據科學和自動化任務選擇Python；2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞，而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript：了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢，選擇取決於項目需求和個人偏好。 1.Python易學，語法簡潔，適用於數據科學和後端開發，但執行速度較慢。 2.JavaScript在前端開發中無處不在，異步編程能力強，Node.js使其適用於全棧開發，但語法可能複雜且易出錯。

JavaScript的核心：它是在C還是C上構建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。

JavaScript應用程序：從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗，後端通過Node.js處理服務器任務。 1.前端示例：改變網頁文本內容。 2.後端示例：創建Node.js服務器。

Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

JavaScript框架：為現代網絡開發提供動力May 02, 2025 am 12:04 AM

JavaScript框架的強大之處在於簡化開發、提升用戶體驗和應用性能。選擇框架時應考慮：1.項目規模和復雜度，2.團隊經驗，3.生態系統和社區支持。

JavaScript，C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪，JavaScript、C 和瀏覽器之間到底有什麼關係？它們之間看似毫無關聯，但實際上，它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章，你將了解到JavaScript如何在瀏覽器中運行，C 在瀏覽器引擎中的作用，以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道，JavaScript是前端開發的核心語言，它直接在瀏覽器中運行，讓網頁變得生動有趣。你是否曾經想過，為什麼JavaScr

See all articles