JavaScript 如何實作搜尋框聯想功能？

JavaScript 如何實作搜尋框聯想功能？

在現代的網頁應用程式中，搜尋框是非常常見的元素，使用者可以在搜尋框中輸入關鍵字來尋找相關內容。除了基本的搜尋功能，聯想功能則為使用者提供了更便利的搜尋體驗。當使用者在搜尋框中輸入關鍵字的時候，系統會自動給出一些相關的聯想建議，使用者只需選擇其中一個建議即可進行搜索，從而提高搜尋的準確性和效率。

本文將介紹如何使用 JavaScript 實作搜尋框聯想功能，我們將使用 HTML、CSS 和 JavaScript 的組合來實作該功能。下面是具體的程式碼範例。

首先，我們需要在 HTML 中建立一個搜尋框和一個聯想建議框的容器：

<input type="text" id="searchBox" placeholder="请输入关键词">
<div id="suggestionBox"></div>

上述程式碼建立了一個 input 元素和一個 div 元素作為聯想建議框的容器。

接下來，我們需要使用CSS 來設定搜尋框和聯想建議框的樣式：

#searchBox {
  width: 300px;
  height: 30px;
  padding: 5px;
}

#suggestionBox {
  background-color: #fff;
  border: 1px solid #ccc;
  max-height: 200px;
  overflow-y: auto;
}

上述程式碼設定了搜尋框的寬度、高度和內邊距，以及聯想建議框的背景色、邊框樣式和最大高度。

現在，我們可以寫 JavaScript 程式碼來實作聯想功能。首先，我們需要取得搜尋框和聯想建議框的DOM 元素：

const searchBox = document.getElementById('searchBox');
const suggestionBox = document.getElementById('suggestionBox');

接下來，我們需要監聽搜尋框的輸入事件，當使用者輸入內容時，我們將取得聯想建議並顯示在聯想建議框中：

searchBox.addEventListener('input', function() {
  const keyword = searchBox.value;
  // 根据关键词获取联想建议的数据
  const suggestions = getSuggestions(keyword);
  
  // 清空联想建议框的内容
  suggestionBox.innerHTML = '';
  
  // 将联想建议添加到联想建议框中
  suggestions.forEach(function(suggestion) {
    const suggestionItem = document.createElement('div');
    suggestionItem.textContent = suggestion;
    suggestionItem.addEventListener('click', function() {
      searchBox.value = suggestion;
      suggestionBox.innerHTML = '';
    });
    suggestionBox.appendChild(suggestionItem);
  });
});

在上述程式碼中，我們透過addEventListener 方法為搜尋框新增了一個input 事件監聽器。當使用者輸入內容時，我們會取得搜尋框的值，並呼叫 getSuggestions 函數來取得聯想建議的資料。然後，我們先清空聯想建議框的內容，然後將聯想建議依序加入聯想建議框中。

最後，我們為每一個聯想建議項目新增了一個點擊事件監聽器。當使用者點擊某個聯想建議時，我們將該建議的值賦給搜尋框，並清空聯想建議框的內容。

至此，我們已經完成了搜尋框聯想功能的實作。使用者現在可以在搜尋框中輸入關鍵字，系統將自動給予相關的聯想建議，使用者可以選擇其中一個建議或繼續輸入關鍵字進行搜尋。

以上就是使用 JavaScript 實作搜尋框聯想功能的詳細程式碼範例。希望對你有幫助！

以上是JavaScript 如何實作搜尋框聯想功能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！