如何使用 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

以上是如何使用 JavaScript 實現即時搜尋並高亮顯示結果的功能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！