최근에 많은 사람들이 수정한 프레임워크를 작업하고 있는데 매일 코드를 볼 때마다 현기증이 납니다. 두 라이브러리의 데이터 범위가 다릅니다. 꽤 좋습니다. 그날 공유하려고 꺼냈습니다. 오늘은 제가 지난 며칠 동안 작업한 기능인 검색 기능에 대해 이야기하겠습니다. HTML 페이지.
이 기능은 주로 검색 상자에 문자를 입력한 후 이전 및 다음 버튼을 눌러 쿼리 영역에서 일치하는 문자를 특수 스타일로 자동 표시하는 데 사용됩니다. 그 후 계속해서 이전 및 다음 버튼을 눌러 사용할 수 있습니다. 순서대로 찾아보세요. 문자를 일치시키고 다른 패턴을 사용하여 현재 일치하는 문자를 다른 일치 문자와 구별합니다.
프런트엔드 디스플레이는 아마도 다음과 같습니다.
HTML은 다음과 같습니다
<div class=container style=z-index: 999 id=searchDiv> <div class=keyword-search> 찾기: <input id=key type=text style=width: 200px placeholder=keyword/> <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; function wordSearch(flg) { var key = $(#key).val() ; //키 값 가져오기 if (!key) { return; //키가 비어 있으면 종료} getArray() } function focusNext(flg); (newflag == 0) {//새 검색이 있으면 인덱스가 지워집니다. index0 = 0; } if (!flg) { if (oldCount0 != 0) {//아직 검색이 있으면 if (index0 < oldCount0) {// 왼쪽 걷기가 완료되지 않은 경우 왼쪽으로 이동 focusMove(index0); index0++; } else if (index0 == oldCount0) {//걷기가 완료됨 index0 = 0; ); 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-- focusMove(index0); } } } function getArray() { newflag = 1; $(.contrast .result).removeClass(res); /키 값 가져오기 if (!key) { oldKey0 = ; return; //키가 비어 있으면 종료} if (oldKey0 != key || $(.current).length != currentLength) { //인덱스0 재설정 = 0; var index = 0; $(.contrast .result).each(function () { $(this).replaceWith($(this).html()); } ) ; pos0 = new Array(); if ($(.contrast-wrap).hasClass(current)) { currentLength = $(.current).length; .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'); $(.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); //$(.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; .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). 각각(함수 () { $(this).replaceWith($(this).html()); }); oldKey0 = } }); 다음으로 구현 원칙을 기억하세요.먼저 마지막 쿼리 결과를 지운 다음 정규식을 사용하여 키 값을 기반으로 해당 영역의 모든 일치 문자에 특수 스타일을 추가합니다. 예를 들어 클래스 이름이 result 인 범위 태그가 메서드에 추가됩니다. odKey0 변수를 사용하여 키 값을 기록합니다. (다음에 입력할 때 먼저 비교해 보세요. 동일하다면 다음 내용이나 이전 내용을 봐야 한다는 뜻이므로 입력 시 정규식 매칭을 사용할 필요가 없습니다.) , newflag는 0으로 설정됩니다(처음이 아닌 경우). 쿼리 newflag는 1).
그런 다음 getNext 메소드를 입력합니다. flg는 사용자가 이전 버튼을 눌렀는지 아니면 다음 버튼을 눌렀는지 나타냅니다. index0을 사용하여 현재 표시된 일치 문자를 기록합니다. 이를 증가 또는 감소할지 결정하거나 0으로 설정합니다. oldCount0 또는 0 미만인 경우 다시 시작해야 합니다).
focusMove 메서드는 페이지를 현재 요소에 배치하는 작업입니다.
배운 jquery 메소드: eq() 선택기: 선택기는 지정된 인덱스 값을 가진 요소를 선택합니다. 예: $(.contrast .result:eq(1)) 클래스 이름이 Contrast인 요소에서 result라는 두 번째 요소를 선택합니다.
parent() 메소드: 요소의 모든 상위 요소입니다. $(p).parents('.contrast-wrap') , p 요소의 대조 랩이라는 이름의 모든 요소.
replacement() 메서드: 선택한 요소를 지정된 HTML 콘텐츠로 교체합니다. 선택한 요소의 요소도 교체됩니다.
offset() 메서드: 문서를 기준으로 일치하는 요소의 오프셋(위치)을 반환하거나 설정합니다.
scrollTop() 메서드: 일치하는 요소의 스크롤 막대의 수직 위치를 반환하거나 설정합니다.
요약위 내용은 에디터가 소개하는 HTML 페이지의 검색 기능입니다. 궁금한 사항이 있으시면 메시지를 남겨주시면 에디터가 시간 맞춰 답변해 드리겠습니다. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!