JavaScript를 사용하여 실시간 검색을 구현하고 결과를 강조하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

JavaScript를 사용하여 실시간 검색을 구현하고 결과를 강조하는 방법은 무엇입니까?

PHPz

풀어 주다： 2023-10-19 08:49:59

원래의

1504명이 탐색했습니다.

如何使用 JavaScript 实现实时搜索并高亮显示结果的功能？

JavaScript를 사용하여 실시간 검색을 구현하고 결과를 강조표시하는 방법은 무엇입니까?

인터넷과 빅데이터의 급속한 발전으로 인해 검색 기능은 많은 웹사이트와 애플리케이션에서 없어서는 안 될 부분이 되었습니다. 기존의 검색 기능은 사용자가 키워드를 입력하고 검색 버튼을 클릭하면 페이지가 다시 로드되어 검색 결과가 표시되는 방식을 사용하는 경우가 많습니다. 그러나 이 방법의 사용자 경험은 상대적으로 열악하며 사용자는 결과를 보려면 페이지가 다시 로드될 때까지 기다려야 합니다. 사용자 경험을 향상시키기 위해 실시간 검색 기능이 탄생했습니다.

실시간 검색 기능이란 사용자가 키워드를 입력하면 페이지를 새로 고치지 않고도 검색 결과가 즉시 표시되며, 검색 결과도 강조 표시되어 사용자가 필요한 정보를 더 잘 찾을 수 있다는 것을 의미합니다. 아래에서는 JavaScript를 사용하여 이 기능을 구현하는 방법을 소개하고 해당 코드 예제를 제공합니다.

먼저 프런트 엔드 디스플레이 인터페이스로 HTML 페이지가 필요합니다. 페이지에는 검색 상자와 검색 결과를 표시할 영역이 필요합니다. 검색 상자가 입력 태그이고 검색 결과를 표시하는 영역이 div 태그이고 해당 ID가 각각 "searchInput" 및 "searchResults"라고 가정합니다. 코드는 다음과 같습니다.

<input type="text" id="searchInput" placeholder="输入关键字">
<div id="searchResults"></div>

로그인 후 복사

다음으로 JavaScript를 사용하여 검색창의 입력 이벤트를 수신하고 입력된 키워드를 검색에 처리할 수 있습니다. input 이벤트를 사용하여 입력 상자의 입력 이벤트를 모니터링할 수 있습니다. 이 이벤트를 모니터링하면 실시간 검색 기능을 구현할 수 있습니다. 코드는 다음과 같습니다.

var searchInput = document.getElementById('searchInput');
var searchResults = document.getElementById('searchResults');

searchInput.addEventListener('input', function() {
  var keyword = searchInput.value.trim(); // 获取输入的关键字并去除首尾空格

  // 调用搜索函数，传入关键字，并将搜索结果显示在页面上
  showSearchResults(keyword);
});

로그인 후 복사

이제 입력된 키워드를 처리하고 해당 검색 결과를 반환하는 검색 기능이 필요합니다. 이 검색 기능에서는 Ajax 요청을 사용하여 백엔드에 요청을 보내고 검색 결과를 얻을 수 있습니다. 단순함을 위해 검색 함수를 비동기 함수로 가정하고 검색 결과가 포함된 배열을 반환한다고 가정합니다. 코드는 다음과 같습니다.

function search(keyword, callback) {
  // 模拟异步请求，实际中可能向后端发送请求并获取搜索结果
  setTimeout(function() {
    var results = [
      'JavaScript',
      'HTML',
      'CSS',
      'Ajax',
      'jQuery'
    ];

    // 调用回调函数，将搜索结果传递给回调函数
    callback(results);
  }, 500); // 设置一个延迟来模拟请求的耗时
}

로그인 후 복사

마지막으로 페이지에 검색 결과를 표시하는 기능이 필요합니다. 이 함수는 검색 결과가 포함된 배열을 매개변수로 받아 결과를 강조 표시하고 검색 결과 영역에 표시합니다. 코드는 다음과 같습니다.

function showSearchResults(keyword) {
  search(keyword, function(results) {
    var html = '';

    for (var i = 0; i < results.length; i++) {
      // 使用关键字高亮显示搜索结果
      var highlighted = results[i].replace(keyword, '<span class="highlight">' + keyword + '</span>');
      html += '<p>' + highlighted + '</p>';
    }

    searchResults.innerHTML = html; // 将搜索结果显示在页面上
  });
}

로그인 후 복사

위 코드에서는 클래스 이름이 "highlight"인 범위 태그를 사용하여 검색 결과에서 키워드를 강조 표시합니다. CSS 스타일을 통해 이 클래스 이름을 가진 요소에 강조 효과를 추가할 수 있습니다.

요약하자면 입력창의 입력 이벤트를 모니터링하여 실시간 검색 기능을 구현했습니다. 사용자가 키워드를 입력하면 검색 기능이 호출되어 검색 결과가 강조 표시되어 페이지에 표시됩니다. 이러한 방식으로 사용자는 검색 결과를 즉시 확인할 수 있어 사용자 경험이 향상됩니다.

참조 출처: