이번에는 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='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>//搜索功能
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>로그인 후 복사
다음으로 구현 원칙을 기억하세요.
먼저 마지막 쿼리 결과를 지운 다음 정규식을 사용하여 A 스팬과 같이 키 값을 기반으로 해당 영역에서 일치하는 모든 문자에 특수 스타일을 추가합니다. 클래스 이름이 result인 태그가 메소드에 추가되고 odKey0 변수는 키의 값을 기록하는 데 사용됩니다. (다음 입력 시 먼저 비교하십시오. 동일하면 다음 또는 이전 내용 입력 시 정규식을 사용할 필요가 없습니다.
그런 다음 getNext 메소드를 입력합니다. flg는 사용자가 이전 버튼을 눌렀는지 아니면 다음 버튼을 눌렀는지 나타냅니다. index0을 사용하여 현재 표시된 일치 문자를 기록하여 증가 또는 감소할지 또는 0으로 설정할지 결정합니다. oldCount0보다 크거나 0보다 작으면 다시 시작됩니다.
focusMove 메서드는 페이지를 현재 요소에 배치하는 작업입니다.
Jquery 방법 학습:
eq() 선택기: 선택기는 지정된 인덱스 값을 가진 요소를 선택합니다. 예: $(".contrast .result:eq(1)")는 클래스 이름 대조 요소 중에서 클래스 이름이 result인 두 번째 요소를 선택합니다.
parents() 메서드: 요소의 모든 상위 요소입니다. $("p").parents('.contrast-wrap'), p 요소의 대조 랩이라는 이름의 모든 요소.
replace() 메서드: 선택한 요소를 지정된 HTML 콘텐츠로 교체합니다. 선택한 요소의 요소도 교체됩니다.
offset() 메서드: 문서를 기준으로 일치하는 요소의 오프셋(위치)을 반환하거나 설정합니다.
scrollTop() 메서드: 일치하는 요소의 스크롤 막대의 수직 위치를 반환하거나 설정합니다.
이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
관련 읽기:
H5에서 사진 공백을 해결하는 방법
H5에서 달력 확인 기능 만드는 방법
H5에서 카메라를 호출하여 사진을 찍고 사진을 압축하는 방법
위 내용은 HTML 페이지에서 검색 기능을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
