jquery implémente la fonction de recherche de pages Web

Cet article présente principalement l'implémentation jquery de la fonction de recherche de pages Web, qui a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Lorsque vous avez besoin de trouver un certain mot-clé. sur la page Premièrement, il peut être réalisé via la fonction de recherche du navigateur, et deuxièmement, il peut être recherché et positionné avec précision via le script frontal. Cet article présente la fonction de recherche et de positionnement du contenu de la page via jQuery, et. peut élargir l'affichage des informations pertinentes après la recherche

Cet article prend comme exemple la recherche du nom de la gare, imitant l'effet de la page du site officiel 12306 pour trouver les horaires de vente des billets de gare lorsque l'utilisateur saisit un mot-clé. et clique sur le bouton de recherche ou appuie sur la touche Entrée, jQuery fait correspondre le contenu via des règles régulières, correspond avec précision au mot-clé et positionne rapidement la page Faites défiler jusqu'à la première position correspondante et affichez les informations pertinentes (dans ce cas, les informations supplémentaires sont le début heure de vente des billets en gare).

HTML

La page doit placer une zone de saisie pour saisir les mots-clés à trouver, et un bouton de recherche, puis le contenu principal #content, qui contient n e388a4556c0f65e1904146cc1a846bee, c'est-à-dire le nom de la station qui vend les billets à chaque période.

<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

Paramètres CSS simples pour le contenu de la page, où .highlight et #tip sont utilisés pour définir la mise en évidence des résultats de recherche et nous présenterons le effet de style de la boîte d’invite d’informations affichée plus tard.

#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

Tout d'abord, nous devons obtenir un effet p fixe, c'est-à-dire que lorsque la page défile vers le bas, la zone de saisie et le bouton utilisés pour Les recherches sont toujours Épinglées en haut de la page pour une recherche facile.

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

Ensuite, nous appelons fixp().

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

Ensuite, le plus critique est de mettre en œuvre la fonction de recherche. Après avoir saisi le mot-clé, cliquez sur le bouton de recherche ou appuyez sur la touche Entrée pour appeler la fonction de recherche highlight().

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

Beaucoup de choses doivent être faites dans la fonction highlight(), 1. Effacer le dernier contenu en surbrillance, 2. Masquer et effacer les informations d'invite, 3. Déterminer si le contenu d'entrée est vide , 4. Obtenir Les mots-clés saisis correspondent régulièrement au contenu de la page, les résultats trouvés sont marqués d'un drapeau et les résultats de la recherche sont mis en surbrillance. 5. En fonction du nombre de résultats de recherche, déterminez le contenu et le décalage de position du. informations rapides, localiser et afficher avec précision les informations rapides. Veuillez consulter le code spécifique :

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

La fonction clearSelection() mentionnée dans le code ci-dessus est utilisée pour effacer l'effet de surbrillance. Le code est le suivant :

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

Enfin, ajoutez. la fonction showTips(), cette fonction est utilisée pour afficher les informations d'invite du résultat de la recherche après avoir saisi le mot-clé de recherche.

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

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment résoudre le problème de la disparition de l'en-tête et du pied de page de jQuery mobile lorsque vous cliquez sur l'écran

JQuery Le plug-in d'effet pour carrousel automatique d'images et de textes

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!