Fonction de recherche complète dans la page HTML

Récemment, j'ai travaillé sur un framework qui a été modifié par de nombreuses personnes. J'ai le vertige quand je regarde le code tous les jours. Cependant, j'ai l'impression d'avoir fait de grands progrès. les différentes plages de données des deux bibliothèques. C'est plutôt bien, 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 de. pages HTML.

Cette fonction est principalement utilisée pour saisir des caractères dans la zone de recherche, puis appuyer sur les boutons précédent et suivant pour marquer automatiquement les caractères correspondants dans la zone de requête avec un style spécial. Après cela, vous pouvez continuer à appuyer sur les boutons précédent et suivant pour. parcourez dans l'ordre. Faites correspondre les caractères et utilisez un autre modèle pour distinguer le caractère actuellement correspondant des autres caractères correspondants.

L'affichage frontal ressemble probablement à ceci :

Le HTML ressemble à ceci :

 <div class=container style=z-index : 999 id=searchDiv> <div class=keyword-search> Rechercher : <input id=key type=text style=width : 200px placeholder=keyword/> <a href= javascript; :void(0); class=prev onclick='wordSearch(1)'><i class=c-icon></i></a> <a href=javascript:void(0); class=next onclick='wordSearch()'><i class=c-icon></i></a> </div> </div>

code du script :

 <script>//Fonction de recherche var oldKey0 = ; var index0 = -1;var oldCount0 = 0; var newflag = 0; var currentLength = 0; ; //Obtenir la valeur de la clé if (!key) { return; //Quitter si la clé est vide} getArray(); function focusNext(flg) { if (newflag == 0) {//S'il y a une nouvelle recherche, l'index est effacé index0 = 0; } if (!flg) { if (oldCount0 != 0) {//S'il y a encore une recherche if (index0 < oldCount0) {// Si vous n'avez pas fini de marcher à gauche, allez à gauche focusMove(index0++; } else if (index0 == oldCount0) {//Vous avez fini de marcher index0 = 0; ); index0++; } else { index0 = 0;//Undetermined focusMove(index0++; } } } else { if (oldCount0 != 0) {//S'il y a encore une recherche if (index0 <= oldCount0 && index0 > 0) {//Si vous n'avez pas fini de marcher à gauche, allez à gauche index0--; focusMove(index0); else if (index0 == 0) {//Vous avez fini de marcher index0 = oldCount0; index0-- focusMove(index0); } } } } function getArray() { newflag = 1; $(.contrast .result).removeClass(res); /Obtenir la valeur de la clé if (!key) { oldKey0 = ; return; //Quitter si la clé est vide} if (oldKey0 != key || $(.current).length != longueur actuelle) { //Réinitialiser l'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='result + (index++) + ' class= 'result'> + key + </span>)); // Remplacer }); else { $(.contrast-wrap).addClass('currentLength = $(.current).length; $(.contrast).each(function () { $(this).html($(this).html().replace(new RegExp(key, gm), <span id= 'result + (index++) + ' class='result'> + key + </span>)); // Remplacer }); //$(#key).val(key); //$(.contrast .result).each(function () { // $(this).parents('.contrast-wrap').addClass('current'); // 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 = 0; } } function focusMove(index0) { $(.contrast); .result:eq( + index0 + )).parents('.contrast-wrap').addClass('current'); $(.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); si ($(.contraste .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); } } $('#key').change(function () { if ($('#key').val() == ) { index0 = 0; $(.contrast .result). each(function () { $(this).replaceWith($(this).html()); }); oldKey0 = ; } });

Tout d'abord, effacez les derniers résultats de la requête, puis utilisez des expressions régulières pour ajouter un style spécial à tous les caractères correspondants dans la zone en fonction de la valeur clé. Par exemple, une balise span avec un nom de classe result est ajoutée à la méthode. utilisez la variable odKey0 pour enregistrer la valeur de la clé (Comparez d'abord lors de votre prochaine saisie. S'ils sont identiques, cela signifie que vous devez examiner le contenu suivant ou précédent, vous n'avez donc pas besoin d'utiliser la correspondance d'expression régulière lors de la saisie. oldCount0 enregistre le nombre total de requêtes). , et newflag est défini sur 0 (si ce n'est pas la première fois) La 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 doit être augmenté ou diminué ou défini sur 0 (s'il est supérieur à). oldCount0 ou inférieur à 0 , vous devez recommencer).

La méthode focusMove est une opération qui positionne la page sur l'élément actuel.

Sélecteur eq() : le sélecteur sélectionne les éléments avec une valeur d'index spécifiée. Par exemple : $(.contrast .result:eq(1)) sélectionne le deuxième élément nommé result dans l'élément dont le nom de classe est contrast.

Méthode parents() : tous les éléments parents de l’élément. $(p).parents('.contrast-wrap') , tous les éléments nommés contrast-wrap de l'élément p.

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.

Ce qui précède est la fonction de recherche dans la page HTML que l'éditeur vous présente. J'espère qu'elle vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !