html页面中完成查找成果

最近在搞一个被许多人改了的框架，每天看代码看的头的晕了，不外感受前进还挺大的，本身做了一个靠山可设置前台查察两个库差异数据范畴的对象，还挺满足，那天拿出来分享一下，本日先说一个这几天做的成果，就是html页面的查找成果。

这个成果首要是实此刻查找框内输入字符，之后按后头的上一个下一个按钮，会自动把查询地区内的匹配字符用非凡的样式标志，之后可以继承按上一个下一个按钮把凭证次序赏识匹配字符，并把当前匹配的字符用另一种样式与其他匹配字符加以区别。

前台表现或许是这个样子：

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"><i class="c-icon"></i></a> <a href="javascript:void(0);" class="next"><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>" + key + "</span>")); // 替代 }); } else { $(".contrast-wrap").addClass('current'); currentLength = $(".current").length; $(".contrast").each(function () { $(this).html($(this).html().replace(new RegExp(key, "gm"), "<span>" + key + "</span>")); // 替代 }); } //$("#key").val(key); oldKey0 = key; //$(".contrast .result").each(function () { // $(this).parents('.contrast-wrap').addClass('current'); // pos0.push($(this).offset().top); /

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!