How to use JavaScript to implement real-time search and highlight results?

How to use JavaScript to implement real-time search and highlight results?

With the rapid development of the Internet and big data, search functions have become an indispensable part of many websites and applications. Traditional search functions often use the method that users enter keywords and click the search button, and then the page is reloaded to display the search results. However, the user experience of this method is relatively poor, and users need to wait for the page to reload to see the results. In order to improve user experience, the real-time search function came into being.

The real-time search function means that when users enter keywords, the search results are displayed immediately without refreshing the page, and the search results can also be highlighted so that users can better find what they need. information. Below, we will introduce how to use JavaScript to implement this function and give corresponding code examples.

First, we need an HTML page as the front-end display interface. In the page we need a search box and an area to display the search results. Assume that our search box is an input tag, and the area that displays search results is a div tag, and their ids are "searchInput" and "searchResults" respectively. The code is as follows:

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

Next, we can use JavaScript to listen to the input event of the search box and process the entered keywords for search. We can use the input event to monitor the input event of the input box. By monitoring this event, we can implement the real-time search function. The code is as follows:

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

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

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

Now we need a search function to process the entered keywords and return the corresponding search results. In this search function, we can use Ajax requests to send requests to the backend and get the search results. For the sake of simplicity, we just simulate a search function, assuming it is an asynchronous function and returns an array containing the search results. The code looks like this:

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

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

Finally, we need a function to display the search results on the page. This function receives an array containing search results as a parameter and highlights the results and displays them in the search results area. The code is as follows:

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; // 将搜索结果显示在页面上
  });
}

In the above code, we use a span tag containing the class name "highlight" to highlight keywords in the search results. We can add highlighting effects to elements with this class name through CSS styles.

To sum up, we have implemented the real-time search function by monitoring the input events of the input box. When the user enters a keyword, the search function is called and the search results are highlighted and displayed on the page. In this way, users can see search results instantly, which improves user experience.

Reference source:

• https://dev.to/marvin/js-tutorial-real-time-search-with-vanilla-js-489k

The above is the detailed content of How to use JavaScript to implement real-time search and highlight results?. For more information, please follow other related articles on the PHP Chinese website!