html 페이지의 검색 기능은 주로 검색창에 문자를 입력하는 데 사용됩니다. 이 글을 통해 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>//搜索功能
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>로그인 후 복사
다음으로 구현 원칙을 기억하세요.
먼저 마지막 쿼리 결과를 지웁니다. 를 사용한 다음 정규식을 사용하여 키 값을 기반으로 해당 영역의 일치하는 모든 문자에 특수 스타일을 추가합니다. 예를 들어 클래스 이름이 result인 범위 태그가 메서드에 추가되고 odKey0 변수가 사용됩니다. 키 값을 기록하려면(아래) 다시 입력할 때 먼저 비교하세요. 동일하면 다음 또는 이전 내용을 봐야 한다는 의미이므로 입력 시 정규식 일치를 사용할 필요가 없습니다. oldCount0은 총 쿼리 수를 기록하고 newflag는 0으로 설정됩니다(처음 쿼리하는 것이 아닌 경우 newflag는 1입니다).
그런 다음 getNext 메소드를 입력합니다. flg는 사용자가 이전 버튼을 눌렀는지 아니면 다음 버튼을 눌렀는지 나타냅니다. index0을 사용하여 현재 표시된 일치 문자를 기록하여 증가 또는 감소할지 또는 0으로 설정할지 결정합니다. oldCount0보다 크거나 0보다 작으면 다시 시작됩니다.
focusMove 메서드는 페이지를 현재 요소에 배치하는 작업입니다.
JQuery 메소드 학습:
eq() 선택기: 선택기는 지정된 인덱스 값을 가진 요소를 선택합니다. 예: $(".contrast .result:eq(1)")는 클래스 이름 대비 요소에서 클래스 이름이 result인 두 번째 요소를 선택합니다. $(".contrast .result:eq(1)")，就是选择类名contrast元素中的第二个类名为result的元素。
parents()方法：元素的所有父元素。$("p").parents('.contrast-wrap')
parents() 메서드: 요소의 모든 상위 요소입니다.
$("p").parents('.contrast-wrap'), p 요소의 대조 랩이라는 이름의 모든 요소.
replace() 메서드: 선택한 요소를 지정된 HTML 콘텐츠로 교체합니다. 선택한 요소의 요소도 교체됩니다.
offset() 메서드: 문서를 기준으로 일치하는 요소의 오프셋(위치)을 반환하거나 설정합니다.
scrollTop() 메서드: 일치하는 요소의 스크롤 막대의 수직 위치를 반환하거나 설정합니다.
요약: 위 내용이 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.
관련 권장 사항:
HTML의 목록, 양식 및 의미론적 사용 요약
HTML5의 postMessage 지식 포인트를 사용하여 Ajax의 POST 도메인 간 문제 해결
Chart.js 경량 HTML5 차트 그리기 도구 라이브러리 사용 단계에 대한 자세한 설명
🎜
위 내용은 HTML 검색창 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
