Aujourd'hui, je vais parler d'une fonction sur laquelle j'ai travaillé ces derniers jours, qui est la fonction de recherche de la page html. Cette fonction est principalement implémentée en saisissant des caractères dans le champ de recherche html, puis en appuyant 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. appuyez sur le bouton précédent. Le bouton suivant parcourra les caractères correspondants dans l'ordre et utilisera un autre modèle pour distinguer le caractère correspondant actuel des autres caractères correspondants. Payez avec le code html !
Démo de style :
Démo de code :
html
<div class="container" style="z-index: 999" id="searchDiv"> <div class="keyword-search"> 查找： <input id="key" type="text" style="width: 200px;" placeholder="关键词" /> <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>
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='result" + (index++) + "' class='result'>" + key + "</span>")); // 替换
});
} else {
$(".contrast-wrap").addClass('current');
currentLength = $(".current").length;
$(".contrast").each(function () {
$(this).html($(this).html().replace(new RegExp(key, "gm"), "<span id='result" + (index++) + "' class='result'>" + key + "</span>")); // 替换
});
}
//$("#key").val(key);
oldKey0 = 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;
newflag = 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);
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);
}
}
$('#key').change(function () {
if ($('#key').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 ajouter un style spécial à tous les caractères correspondants dans la zone en fonction de la valeur clé. Par exemple, tous sont ajoutés dans la méthode A span. balise avec un nom de classe de résultat. Utilisez la variable odKey0 pour enregistrer la valeur de la clé (comparez-la d'abord lorsque vous la saisirez la prochaine fois. S'ils sont identiques, cela signifie que vous devez regarder le contenu suivant ou précédent, donc vous n'avez pas besoin d'utiliser à nouveau la correspondance d'expression régulière). oldCount0 enregistre le nombre total de requêtes et newflag est défini sur 0 (si ce n'est pas 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. à 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.
Recommandations associées :
Comment implémenter le code carrousel du graphique de mise au point numérique en HTML
Comment insérer des images en HTML
Que faire si les DIV se chevauchent en HTML
Comment l'utiliser en HTML marge 0 auto
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
