fonction de champ de recherche HTML

La fonction de recherche de la page html est principalement utilisée pour saisir des caractères dans le champ de recherche. Laissez-moi partager avec vous la fonction de recherche de la page html à travers cet article. Les amis qui en ont besoin peuvent s'y référer

Récemment, j'ai travaillé sur un projet qui a été modifié par de nombreuses personnes, j'ai le vertige quand je regarde le code tous les jours, mais j'ai l'impression d'avoir fait beaucoup de progrès, j'ai fait un backend et configurable. frontend pour visualiser les différentes plages de données des deux bibliothèques. J'en suis assez satisfait, je l'ai sorti pour le partager ce jour-là, je vais parler d'une fonction sur laquelle j'ai travaillé ces derniers jours, qui est. la fonction de recherche des pages html.

Cette fonction consiste principalement à saisir des caractères dans la zone de recherche, puis à appuyer sur les boutons précédent et suivant. Les caractères correspondants dans la zone de requête seront automatiquement marqués avec un style spécial. Vous pouvez continuer à appuyer sur le précédent. et boutons suivants Un bouton parcourra les caractères correspondants dans l'ordre et utilisera un autre style pour distinguer le caractère correspondant actuel des autres caractères correspondants.

L'affichage frontal ressemble probablement à ceci :

Le code HTML ressemble à ceci :

 <p class="container" style="z-index: 999" id="searchp">
        <p class="keyword-search">
            查找：
            <input id="key" type="text" style="width: 200px;" placeholder="关键词" />
            <a href="javascript:void(0);" class="prev" onclick=&#39;wordSearch(1)&#39;><i class="c-icon"></i></a>
            <a href="javascript:void(0);" class="next" onclick=&#39;wordSearch()&#39;><i class="c-icon"></i></a>
        </p>
    </p>

code de script :

  <script>//搜索功能
        var oldKey0 = "";
        var index0 = -1;var oldCount0 = 0;
        var newflag = 0;
        var currentLength = 0;
        function wordSearch(flg) {
            var key = $("#key").val(); //取key值
            if (!key) {
                return; //key为空则退出
            }
            getArray();
            focusNext(flg);
        }
        function focusNext(flg) {
            if (newflag == 0) {//如果新搜索,index清零
                index0 = 0;
            }
            if (!flg) {
                if (oldCount0 != 0) {//如果还有搜索
                    if (index0 < oldCount0) {//左边如果没走完，走左边
                        focusMove(index0);
                        index0++;
                    } else if (index0 == oldCount0) {//都走完了
                        index0 = 0;
                        focusMove(index0);
                        index0++;
                    }
                    else {
                        index0 = 0;//没确定
                        focusMove(index0);
                        index0++;
                    }
                }
            } else {
                if (oldCount0 != 0) {//如果还有搜索
                    if (index0 <= oldCount0 && index0 > 0) {//左边如果没走完，走左边
                        index0--;
                        focusMove(index0);
                    } else if (index0 == 0) {//都走完了
                        index0 = oldCount0;
                        index0--
                        focusMove(index0);
                    }
                }
            }
        }
        function getArray() {
            newflag = 1;
            $(".contrast .result").removeClass("res");
            var key = $("#key").val(); //取key值
            if (!key) {
                oldKey0 = "";
                return; //key为空则退出
            }
            if (oldKey0 != key || $(".current").length != currentLength) {
                //重置
                index0 = 0;
                var index = 0;
                $(".contrast .result").each(function () {
                    $(this).replaceWith($(this).html());
                });
                pos0 = new Array();
                if ($(".contrast-wrap").hasClass("current")) {
                    currentLength = $(".current").length;
                    $(".current .contrast").each(function () {
                        $(this).html($(this).html().replace(new RegExp(key, "gm"), "<span id=&#39;result" + (index++) + "&#39; class=&#39;result&#39;>" + key + "</span>")); // 替换
                    });
                } else {
                    $(".contrast-wrap").addClass(&#39;current&#39;);
                    currentLength = $(".current").length;
                    $(".contrast").each(function () {
                        $(this).html($(this).html().replace(new RegExp(key, "gm"), "<span id=&#39;result" + (index++) + "&#39; class=&#39;result&#39;>" + key + "</span>")); // 替换
                    });
                }
                //$("#key").val(key);
                oldKey0 = key;
                //$(".contrast .result").each(function () {
                //    $(this).parents(&#39;.contrast-wrap&#39;).addClass(&#39;current&#39;);
                //    pos0.push($(this).offset().top);
                //});
                // pos0.push($(".contrast .result:eq(2)").offset().top - $(".contrast .result:eq(2)").parents(".contrast").offset().top);
                oldCount0 = $(".contrast .result").length;
                newflag = 0;
            }
        }
        function focusMove(index0) {
            $(".contrast .result:eq(" + index0 + ")").parents(&#39;.contrast-wrap&#39;).addClass(&#39;current&#39;);
            $(".contrast .result:eq(" + index0 + ")").addClass("res");
            var top = $(".contrast .result:eq(" + index0 + ")").offset().top + $(".contrast .result:eq(" + index0 + ")").parents(".contrast").scrollTop();
            var intop = top - $(".contrast .result:eq(" + index0 + ")").parents(".contrast").offset().top;
            $(".contrast .result:eq(" + index0 + ")").parents(".contrast").animate({ scrollTop: intop }, 200);
            if ($(".contrast .result:eq(" + index0 + ")").parents(".contrast").scrollTop() == 0) {
                $("html, body").animate({ scrollTop: top - 200 }, 200);
            } else {
                $("html, body").animate({ scrollTop: $(".contrast .result:eq(" + index0 + ")").parents(".contrast").offset().top - 200 }, 200);
            }
        }
        $(&#39;#key&#39;).change(function () {
            if ($(&#39;#key&#39;).val() == "") {
                index0 = 0;
                $(".contrast .result").each(function () {
                    $(this).replaceWith($(this).html());
                });
                oldKey0 = "";
            }
        });
    </script>

Ensuite, notez le principe de mise en œuvre :

Effacez d'abord les derniers résultats de la requête, puis utilisez des expressions régulières pour tous les caractères correspondants dans la zone est ajoutée avec un style spécial. Par exemple, une balise span avec un nom de classe de résultat est ajoutée à la méthode et la variable odKey0 est utilisée pour enregistrer la valeur de la clé (comparez-la d'abord lors de la prochaine saisie. Si ils sont identiques, cela signifie qu'il doit être vérifié. Il n'est pas nécessaire d'utiliser une correspondance d'expression régulière pour le contenu suivant ou précédent), oldCount0 enregistre le nombre total de requêtes et newflag est défini sur 0 (si ce n'est pas le cas). la première requête, newflag est 1).

Entrez ensuite la méthode getNext. flg indique si l'utilisateur a appuyé sur le bouton précédent ou suivant. Utilisez index0 pour enregistrer le caractère correspondant actuellement affiché. Comparez-le avec oldCount0 pour déterminer s'il est incrémenté, décrémenté ou défini sur. 0 (S'il est supérieur à oldCount0 ou inférieur à 0, il recommencera).

La méthode focusMove consiste à positionner la page sur l'élément actuel.

Méthodes Jquery apprises :

Sélecteur eq() : Le sélecteur sélectionne les éléments avec la valeur d'index spécifiée. Par exemple :

sélectionne le deuxième élément nommé result parmi les éléments dont le nom de classe est contrast. $(".contrast .result:eq(1)")

Méthode parents() : tous les éléments parents de l'élément.

, tous les p éléments dont le nom de classe est contrast-wrap. $("p").parents('.contrast-wrap')

Méthode replace() : Remplace l'élément sélectionné par le contenu html spécifié. Notez que les éléments de l'élément sélectionné sont également remplacés.

Méthode offset() : renvoie ou définit le décalage (position) de l'élément correspondant par rapport au document.

Méthode scrollTop() : renvoie ou définit la position verticale de la barre de défilement de l'élément correspondant.

Résumé : 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.

Recommandations associées :

Résumé des listes, des formulaires et de l'utilisation sémantique du HTML

Points de connaissances sur l'utilisation de postMessage dans HTML5 Résoudre le problème inter-domaines POST dans Ajax

La bibliothèque d'outils de dessin de graphiques HTML5 légers Chart.js étapes détaillées à utiliser

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!