바닐라 JavaScript를 사용한 내부 필터링 검색-CSS 튜토리얼-php.cn

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

William Shakespeare

풀어 주다： 2025-03-18 12:00:22

원래의

547명이 탐색했습니다.

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

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

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

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

JavaScript 활용

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

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

기본 HTML 구조

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

<h1> FAQ 섹션</h1>

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

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

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

<div>
  <h3>자세히 알아보십시오</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>우리는 누구입니까</h3>
  <p>...</p>
  <span class="hidden-keywords">비밀, 회사, 역사</span>
</div>

로그인 후 복사

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

방법 2 : 속성

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

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

로그인 후 복사

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