사이트에서 검색 기능은 사용자들이 원하는 내용을 더 쉽게 찾을 수 있도록 도와줍니다. 이번에는 jQuery를 사용하여 사이트 내 검색 기능을 구현하는 방법을 알아보겠습니다.

1. HTML 구조 설정

검색 기능을 구현하기 위해 먼저 HTML 구조를 설정해야 합니다. 아래와 같이 검색 입력창과 검색 결과를 표시할 영역을 만들어주세요.

<input type="text" id="searchInput" placeholder="검색어를 입력하세요">
<div id="searchResults"></div>

searchInput은 검색 입력창의 id이며, searchResults는 검색 결과를 표시할 영역의 id입니다.

2. jQuery를 사용한 검색 기능 구현

이제 jQuery를 사용하여 검색 기능을 구현해보겠습니다. 아래 코드를 페이지 안에 포함시켜주세요.

$(document).ready(function() {
  $("#searchInput").on("keyup", function() {
    var searchTerm = $(this).val().toLowerCase();
    
    $(".searchable-item").each(function() {
      var text = $(this).text().toLowerCase();
      var match = text.includes(searchTerm);
      
      $(this).toggle(match);
    });
  });
});

위 코드는 페이지가 로드될 때 jQuery가 실행되도록 $(document).ready 함수 안에 코드를 작성합니다.

검색 입력창(searchInput)에 입력된 텍스트가 변경될 때마다, 입력된 검색어(searchTerm)를 소문자로 변환하고, 각 검색 대상 요소(.searchable-item)의 텍스트를 소문자로 변환한 후 해당 검색어를 포함하는지 체크합니다.

검색 결과를 표시할 영역의 요소(searchResults)를 숨기거나 보이도록 하는 toggle 함수를 사용하여 검색 결과를 화면에 표시합니다.

3. 검색 대상 요소 설정

마지막으로, 검색 대상 요소를 설정해야 합니다. 검색 대상이 되는 요소는 클래스(searchable-item)를 추가하여 구분해줍니다. 예를 들어, 아래와 같이 검색 대상 요소를 설정할 수 있습니다.

<div class="searchable-item">검색 가능한 텍스트 1</div>
<div class="searchable-item">검색 가능한 텍스트 2</div>
<div class="searchable-item">검색 가능한 텍스트 3</div>

이제 검색 입력창에 텍스트를 입력하면 해당하는 검색 결과만 표시됩니다.

마무리

이렇게 jQuery를 사용하여 사이트 내 검색 기능을 구현할 수 있습니다. 사용자들이 원하는 내용을 빠르게 찾을 수 있도록 검색 기능을 추가하는 것은 유용한 기능 중 하나입니다.

더 많은 기능을 구현하고 싶다면, jQuery 공식 문서를 참고하시기 바랍니다.