html搜索框技巧

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

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

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

html是这样：

 <p class="container" style="z-index: 999" id="searchp">
        <p 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>
        </p>
    </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++) + "' 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>

接下来记一下实现原理：

首先先把上一次的查询结果清除掉，然后根据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查找框功能的详细内容，更多请关注php中文网其它相关文章！