html查找框功能

最近在搞一个被很多人改了的框架，天天看代码看的头的晕了，不过感觉进步还挺大的，自己做了一个后台可配置前台查看两个库不同数据范围的东西，还挺满意，那天拿出来分享一下，今天先说一个这几天做的功能，就是html页面的查找功能。

这个功能主要是实现在查找框内输入字符，之后按后面的上一个下一个按钮，会自动把查询区域内的匹配字符用特殊的样式标记，之后可以继续按上一个下一个按钮把按照顺序浏览匹配字符，并把当前匹配的字符用另一种样式与其他匹配字符加以区别。

前台显示大概是这个样子：

html是这样：

 p >
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++) + >
接下来记一下实现原理：
首先先把上一次的查询结果清除掉，然后根据key的值，用正则表达式把区域内所有匹配的字符全都加上特殊的样式，比如方法中就全部加了一个类名为result的span标签，用odKey0变量记录key的值（下次再进入先比较如果一样的话说明是要看下一个或者上一个的内容，就不用在进入用正则表达式匹配了），oldCount0记录总共查询出来的个数，newflag置0（如果不是初次查询newflag为1）。
接着进入getNext方法，flg表示用户按下的是上一个还是下一个按钮，用index0记录当前查看的是哪一个匹配字符，与oldCount0比较，确定是递增或递减还是置0（如果大于oldCount0或者小于0，就要重新开始）。
focusMove方法就是使页面定位到当前元素的操作。
学到的jquery方法：
eq() 选择器：选择器选取带有指定 index 值的元素。例如：$( .contrast .result:eq(1) )，就是选择类名contrast元素中的第二个类名为result的元素。
parents()方法：元素的所有父元素。$( p ).parents( .contrast-wrap )，p元素所有类名为contrast-wrap的元素。
replace()方法：用指定的html内容替换被选元素，注意是把被选元素的元素也替换掉。
offset()方法：返回或设置匹配元素相对于文档的偏移（位置）。
scrollTop()方法：返回或设置匹配元素的滚动条的垂直位置。
总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。
相关推荐：
HTML的列表、表单、语义化使用方法总结
使用HTML5中postMessage知识点解决Ajax中POST跨域问题
Chart.js 轻量级HTML5图表绘制工具库使用步骤详解
以上就是html查找框功能的详细内容，html教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。