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

（编辑：常州站长网）

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