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

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

随着互联网和大数据的快速发展，搜索功能已经成为了许多网站和应用程序中必不可少的一部分。传统的搜索功能往往采用用户输入关键字后点击搜索按钮，然后页面重新加载显示搜索结果的方式。然而，这种方式的用户体验相对较差，用户需要等待页面重新加载才能看到结果。为了提高用户体验，实时搜索功能应运而生。

实时搜索功能即用户在输入关键字时，在不刷新页面的情况下即时地显示搜索结果，并且还可以将搜索结果进行高亮显示，以便用户更好地找到所需的信息。下面，我们将介绍如何使用 JavaScript 来实现这一功能，并给出相应的代码示例。

首先，我们需要一个 HTML 页面作为前端展示界面。在页面中我们需要一个搜索框和一个显示搜索结果的区域。假设我们的搜索框是一个 input 标签，显示搜索结果的区域是一个 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" 的 span 标签来高亮显示搜索结果中的关键字。我们可以通过 CSS 样式为这个类名的元素添加高亮效果。

综上所述，我们通过监听输入框的输入事件，实现了实时搜索功能。当用户输入关键字时，搜索函数会被调用，搜索结果将被高亮显示并显示在页面上。这样，用户可以即时地看到搜索结果，提高了用户体验。

参考来源：

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