js를 사용하여 html 페이지에서 검색 기능 구현

오늘은 제가 지난 며칠 동안 작업한 기능인 html 페이지 검색 기능에 대해 이야기해 보겠습니다. 이 기능은 주로 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" onclick=&#39;wordSearch(1)&#39;><i class="c-icon"></i></a>
<a href="javascript:void(0);" class="next" onclick=&#39;wordSearch()&#39;><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 id=&#39;result" + (index++) + "&#39; class=&#39;result&#39;>" + key + "</span>")); // 替换
                    });
                } else {
                    $(".contrast-wrap").addClass(&#39;current&#39;);
                    currentLength = $(".current").length;
                    $(".contrast").each(function () {
                        $(this).html($(this).html().replace(new RegExp(key, "gm"), "<span id=&#39;result" + (index++) + "&#39; class=&#39;result&#39;>" + key + "</span>")); // 替换
                    });
                }
                //$("#key").val(key);
                oldKey0 = key;

                //$(".contrast .result").each(function () {
                //    $(this).parents(&#39;.contrast-wrap&#39;).addClass(&#39;current&#39;);
                //    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(&#39;.contrast-wrap&#39;).addClass(&#39;current&#39;);
            $(".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);
            }

        }


        $(&#39;#key&#39;).change(function () {
            if ($(&#39;#key&#39;).val() == "") {
                index0 = 0;
                $(".contrast .result").each(function () {
                    $(this).replaceWith($(this).html());
                });
                oldKey0 = "";
            }
        });
    </script>

다음으로 구현 원칙에 유의하세요. :

우선 단일 쿼리의 결과가 지워진 다음 키 값에 따라 정규식을 사용하여 해당 영역의 모든 일치 문자에 특수 스타일을 추가합니다. 예를 들어 클래스 이름이 result인 범위 태그가 추가됩니다. 해당 메소드에 odKey0 변수를 사용합니다. (다음에 입력할 때 먼저 비교해보세요. 동일하다면 다음 내용이나 이전 내용을 보고 싶다는 뜻이므로 보지 않습니다.) 다시 정규식 일치를 사용해야 함) oldCount0은 총 쿼리 수를 기록하고 newflag는 0으로 설정됩니다(첫 번째 쿼리가 아닌 경우 newflag는 1입니다).

그런 다음 getNext 메소드를 입력합니다. flg는 사용자가 이전 버튼을 눌렀는지 아니면 다음 버튼을 눌렀는지 나타냅니다. index0을 ​​사용하여 현재 표시된 일치 문자를 기록하여 증가 또는 감소할지 또는 0으로 설정할지 결정합니다. oldCount0보다 크거나 0보다 작으면 다시 시작됩니다.

focusMove 메서드는 페이지를 현재 요소에 배치하는 작업입니다.

관련 권장 사항:

HTML에서 디지털 포커스 차트 캐러셀 코드를 구현하는 방법

HTML에 그림을 삽입하는 방법

HTML에서 DIV가 서로 겹치는 경우 수행할 작업

HTML에서 여백 0 자동 사용 방법

위 내용은 js를 사용하여 html 페이지에서 검색 기능 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!