html网页页面中进行搜索作用

近期在搞1个被许多人改了的架构,每天看编码看的头的晕了,但是觉得发展还挺大的,自身做了1个后台管理可配备前台接待查询两个库不一样数据信息范畴的物品,还挺令人满意,那天拿出来共享1下,今日先说1个这几日做的作用,便是html网页页面的搜索作用。

这个作用关键是完成在搜索框内键入标识符,以后按后边的上1个下1个按钮,会全自动把查寻地区内的配对标识符用独特的款式标识,以后能够再次按上1个下1个按钮把依照次序访问配对标识符,并把当今配对的标识符用另外一种款式与别的配对标识符加以差别。

前台接待显示信息大约是这个模样:

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 = ⑴;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>

接下来记1下完成基本原理:

最先先把上1次的查寻結果消除掉,随后依据key的值,用正则表达式表述式把地区内全部配对的标识符统统再加独特的款式,例如方式中就所有加了1个类名为result的span标识,用odKey0自变量纪录key的值(下一次再进到先较为假如1样的话表明是要看下1个或上1个的內容,就无需在进到用正则表达式表述式配对了),oldCount0纪录一共查寻出来的个数,newflag置0(假如并不是第一次查寻newflag为1)。

接着进到getNext方式,flg表明客户按下的是上1个還是下1个按钮,用index0纪录当今查询的是哪个配对标识符,与oldCount0较为,明确是递增或下降還是置0(假如超过oldCount0或小于0,就要再次刚开始)。

focusMove方式便是使网页页面精准定位到当今元素的实际操作。

学到的jquery方式:

eq() 挑选器:挑选器选择带有特定 index 值的元素。比如:$(".contrast .result:eq(1)"),便是挑选类名contrast元素中的第2个类名为result的元素。

parents()方式:元素的全部父元素。$("p").parents('.contrast-wrap'),p元素全部类名为contrast-wrap的元素。

replace()方式:用特定的html內容更换被选元素,留意是把被选元素的元素也更换掉。

offset()方式:回到或设定配对元素相对文本文档的偏位(部位)。

scrollTop()方式:回到或设定配对元素的翻转条的竖直部位。

总结

以上所述是网编给大伙儿详细介绍的html网页页面中进行搜索作用,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!