바닐라 JavaScript를 사용한 내부 필터링 검색

간단한 인 페이지 검색 기능으로 정보가 풍부한 페이지에서 사용자 경험을 향상시킵니다. 데이터베이스 쿼리 또는 JSON 구문 분석은 잊어 버립니다.이 메소드는 웹 페이지의 렌더링 된 텍스트 내용을 직접 검색합니다. 브라우저 내장 검색 검색이 존재하지만이 접근 방식은 정제 된 필터링 경험을 제공하여 관련 결과를 강조하여 더 쉬운 탐색을 강조합니다.

기능을 보여주는 라이브 데모는 다음과 같습니다. [데모 링크]

이 기술을 실제 프로젝트에서 https://www.php.cn/link/2a60eed05079970d61abad679da7ae8f 에서 사용합니다.

JavaScript 활용

이 튜토리얼은 JavaScript를 사용하여 모든 대화식 요소를 관리합니다. 구체적으로, 그것은 다음과 같습니다.

1. 검색 가능한 콘텐츠를 식별합니다.
2. 검색 필드에서 사용자 입력을 모니터링합니다.
3. 검색 가능한 요소의 innerText 필터링하십시오.
4. 텍스트에 검색어가 포함되어 있는지 확인하십시오 ( .includes() 는 여기에서 중요합니다).
5. 검색어 일치를 기반으로 요소 가시성을 전환합니다.

기본 HTML 구조

각 질문이 제목 및 내용이있는 "카드"로 표시되는 FAQ 페이지를 가정 해 봅시다.

<h1 id="FAQ-섹션"> FAQ 섹션</h1>

<div>
  <h3 id="우리는-누구입니까">우리는 누구입니까</h3>
  <p>그것은 5 세기뿐만 아니라 전자 조판으로의 도약으로 살아 남았으며, 본질적으로 변하지 않았다. 대중화되었습니다</p>
</div>

<div>
  <h3 id="우리가하는-일">우리가하는 일</h3>
  <p>그것은 5 세기뿐만 아니라 전자 조판으로의 도약으로 살아 남았으며, 본질적으로 변하지 않았다. 대중화되었습니다</p>
</div>

<div>
  <h3 id="왜-여기서-일합니다">왜 여기서 일합니다</h3>
  <p>그것은 5 세기뿐만 아니라 전자 조판으로의 도약으로 살아 남았으며, 본질적으로 변하지 않았다. 대중화되었습니다</p>
</div>

<div>
  <h3 id="자세히-알아보십시오">자세히 알아보십시오</h3>
  <p>우리에 대해 더 배우고 싶습니까?</p>
</div>

수많은 질문이있는 페이지의 경우이 구조는 효과적으로 스케일링됩니다.

상호 작용을 활성화하기 위해 단일 CSS 규칙을 사용하겠습니다.

 . is-hidden {display : 없음; }

이 클래스는 요소 가시성을 제어하기 위해 동적으로 추가되거나 제거됩니다. 검색 입력도 추가하겠습니다.

 <label for="searchbox">찾다:</label>
<input type="text" id="searchbox">

핵심 자바 스크립트 기능

다음 JavaScript 코드는 검색 기능을 관리합니다.

 function livesearch () {
  let cards = document.querySelectorAll ( '. cards'); // 카드 요소를 선택합니다
  searchQuery = document.getElementById ( "SearchBox"). 값을 보자. // 검색어를 얻습니다

  cards.foreach (card => {
    TextContent = card.innertext.tolowercase (); // 소문자로 정규화합니다
    searchtermlower = searchQuery.tolowerCase (); // 소문자로 정규화합니다

    if (textContent.includes (SearchTermLower)) {
      card.classlist.remove ( 'is-hidden'); // 일치 카드 표시
    } 또 다른 {
      card.classlist.add ( 'is-hidden'); // 일치하지 않는 카드를 숨 깁니다
    }
  });
}

// 과도한 기능 호출을 방지하기 위해 작은 지연 추가
TypingTimer를하자;
타입 interval = 500을하자; // 반 초
let searchInput = document.getElementById ( 'SearchBox');

searchInput.addeventListener ( 'keyup', () => {
  클리어 타임 아웃 (typingtimer);
  typingtimer = settimeout (livesearch, typeinterval);
});

코드는 카드를 통해 반복, 검색어 포함 확인 (사례에 민감하지 않음) 및 그에 따라 가시성을 업데이트합니다. 지연은 빠른 키 스트로크의 성능 문제를 방지합니다.

검색 기능 확장 : 퍼지 매칭

퍼지 매칭 (명시 적으로 표시되지 않더라도 관련 키워드 검색)을 통합하려면 숨겨진 요소 또는 속성 사용을 고려하십시오.

방법 1 : 숨겨진 요소

키워드가 포함 된 숨겨진 요소 추가 :

<div>
  <h3 id="우리는-누구입니까">우리는 누구입니까</h3>
  <p>...</p>
  <span class="hidden-keywords">비밀, 회사, 역사</span>
</div>

숨겨진 키워드에 액세스하기 위해 innerText 대신 textContent 포함하도록 liveSearch 수정하십시오.

방법 2 : 속성

이미지에 alt 와 같은 속성을 사용하십시오.

<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174227042512545.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="바닐라 JavaScript를 사용한 내부 필터링 검색">

getAttribute('alt') 사용하여 liveSearch 조정하여 속성 값을 검색하십시오.

중요한 메모

이 검색 방법은 DOM에서 이미 렌더링 된 콘텐츠로 제한됩니다. 외부 데이터베이스 또는 대형 데이터 세트를 검색하는 데 적합하지 않습니다.

결론

바닐라 JavaScript로 구현 된이 간단하지만 효과적인 인 페이지 검색 솔루션은 광범위한 컨텐츠로 웹 페이지의 유용성을 크게 향상시킬 수 있습니다. FAQ 페이지에서 이미지 갤러리에 이르기까지 다양한 응용 프로그램에 맞게이 기술을 적응하고 확장하십시오.

위 내용은 바닐라 JavaScript를 사용한 내부 필터링 검색의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!