jquery implementiert die Suchfunktion für Webseiten

Dieser Artikel stellt hauptsächlich die JQuery-Implementierung der Webseiten-Suchfunktion vor, die einen bestimmten Referenzwert hat. Jetzt kann ich sie mit allen teilen, die sie brauchen.

Wenn Sie ein bestimmtes Schlüsselwort finden müssen Auf der Seite kann es erstens über die Suchfunktion des Browsers realisiert werden und zweitens kann es über das Front-End-Skript genau gesucht und positioniert werden. In diesem Artikel wird die Funktion zum Suchen und Positionieren des Seiteninhalts über jQuery vorgestellt kann die Anzeige relevanter Informationen nach der Suche erweitern

Dieser Artikel verwendet als Beispiel die Suche nach dem Namen des Bahnhofs und ahmt den Effekt der Seite der offiziellen Website von 12306 nach, um die Verkaufszeiten für Bahnhofstickets zu finden, wenn der Benutzer ein Schlüsselwort eingibt und klickt auf die Suchschaltfläche oder drückt die Eingabetaste, jQuery gleicht den Inhalt anhand regelmäßiger Regeln ab, stimmt genau mit dem Schlüsselwort überein und positioniert die Seite schnell. Scrollen Sie zur ersten passenden Position und zeigen Sie relevante Informationen an (in diesem Fall sind die zusätzlichen Informationen der Anfang). Zeitpunkt des Fahrkartenverkaufs am Bahnhof).

HTML

Auf der Seite müssen ein Eingabefeld zur Eingabe der zu findenden Schlüsselwörter sowie eine Suchschaltfläche und dann der Hauptinhalt #content platziert werden, der Folgendes enthält n

, d. h. der Name des Bahnhofs, der in jedem Zeitraum Fahrkarten verkauft.

<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

Einfache CSS-Einstellungen für Seiteninhalte, wobei .highlight und #tip verwendet werden, um die Hervorhebung von Suchergebnissen bzw. Informationstipps festzulegen Der von der Box angezeigte Effekt wird später vorgestellt.

#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

Zunächst müssen wir einen festen p-Effekt erzielen, d. h. wenn die Seite nach unten gescrollt wird, werden das Eingabefeld und die Schaltfläche verwendet Suchfunktionen sind immer ganz oben auf der Seite fixiert, um die Suche zu erleichtern.

(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);

Als nächstes rufen wir fixp() auf.

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

Als nächstes ist es am wichtigsten, die Suchfunktion zu implementieren. Nachdem Sie das Schlüsselwort eingegeben haben, klicken Sie auf die Schaltfläche „Suchen“ oder drücken Sie die Eingabetaste, um die Suchfunktion „highlight()“ aufzurufen.

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

Die Funktion highlights() muss viele Dinge tun: 1. Den zuletzt hervorgehobenen Inhalt löschen, 2. Die Eingabeaufforderungsinformationen ausblenden und löschen, 3. Feststellen, ob der Eingabeinhalt leer ist, 4. Abrufen Geben Sie die eingegebenen Schlüsselwörter ein und stimmen Sie sie regelmäßig mit dem Seiteninhalt ab. Verwenden Sie die Flaggenmarkierung, um die Ergebnisse zu finden und die Suchergebnisse hervorzuheben. 5. Bestimmen Sie anhand der Anzahl der Suchergebnisse den Inhalt und den Positionsversatz der Eingabeaufforderungsinformationen genau Suchen Sie die Eingabeaufforderungsinformationen und zeigen Sie sie an. Bitte sehen Sie sich den spezifischen Code an:

$(function(){ 
    ... 
    var i = 0; 
    var sCurText; 
    function highlight(){ 
        clearSelection();//先清空一下上次高亮显示的内容； 
        var flag = 0; 
        var bStart = true; 
        $('#tip').text(''); 
        $('#tip').hide(); 
        var searchText = $('#searchstr').val(); 
        var _searchTop = $('#searchstr').offset().top+30; 
        var _searchLeft = $('#searchstr').offset().left; 
        if($.trim(searchText)==""){ 
            showTips("请输入查找车站名",_searchTop,3,_searchLeft); 
            return; 
        } 
        //查找匹配 
        var searchText = $('#searchstr').val();//获取你输入的关键字； 
        var regExp = new RegExp(searchText, 'g');//创建正则表达式，g表示全局的，如果不用g， 
                  //则查找到第一个就不会继续向下查找了； 
        var content = $("#content").text(); 
        if (!regExp.test(content)) { 
            showTips("没有找到要查找的车站",_searchTop,3,_searchLeft); 
            return; 
        } else { 
            if (sCurText != searchText) { 
                i = 0; 
                sCurText = searchText; 
             } 
        } 
        //高亮显示 
        $('p').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; 
            } 
        } 
    } 
      ... 
});

Die im obigen Code erwähnte Funktion „clearSelection()“ wird verwendet, um den Hervorhebungseffekt zu löschen. Der Code lautet wie folgt:

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

Fügen Sie schließlich showTips() hinzu. Funktion, mit der nach Eingabe des Suchbegriffs die Eingabeaufforderungsinformationen für das Suchergebnis angezeigt werden.

$(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 ) );  
    }  
});

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So lösen Sie das Problem, dass die Kopf- und Fußzeile von jQuery Mobile beim Klicken auf den Bildschirm verschwindet

JQuery Das Effekt-Plugin für automatisches Karussell von Bildern und Texten

Das obige ist der detaillierte Inhalt vonjquery implementiert die Suchfunktion für Webseiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!