使用Ajax實現文本框聯想功能可以大大提升用戶的輸入效率和體驗。當用戶在文本框中輸入關鍵詞時，通過Ajax異步請求服務器，并根據返回的數據實時展示給用戶相關的聯想詞。這種技術廣泛應用于搜索引擎的關鍵詞提示、地址自動補全等功能。下面以一個搜索引擎的關鍵詞提示為例，詳細介紹如何使用Ajax實現文本框聯想。 首先，我們需要在頁面中創建一個文本框，并為其綁定一個鍵盤事件。用戶在文本框中輸入關鍵詞時，觸發鍵盤事件，執行Ajax請求并實時展示聯想詞。 代碼如下：

<input id="keyword" type="text">
<script>
var input = document.getElementById("keyword");
var timer = null;
input.addEventListener("keyup", function() {
clearTimeout(timer);
timer = setTimeout(sendRequest, 300);
});
function sendRequest() {
var keyword = input.value;
// 利用Ajax發送異步請求
var xhr = new XMLHttpRequest();
xhr.open("GET", "/suggest?keyword=" + keyword);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
showSuggestions(response);
}
};
xhr.send();
}
function showSuggestions(suggestions) {
// 將聯想詞展示在頁面上
var suggestionList = document.getElementById("suggestion-list");
suggestionList.innerHTML = "";
for (var i = 0; i < suggestions.length; i++) {
var suggestion = document.createElement("p");
suggestion.textContent = suggestions[i];
suggestionList.appendChild(suggestion);
}
}
</script>

上述代碼中，我們為文本框綁定了一個鍵盤事件keyup，當用戶每次敲擊鍵盤時，都會調用sendRequest函數發送Ajax請求。使用setTimeout函數可以避免用戶一邊輸入一邊發送請求，提高性能。 在sendRequest函數中，我們構建了一個XMLHttpRequest對象，并使用open方法指定請求方式和URL。通過onreadystatechange事件監聽服務器返回的數據，并使用JSON.parse方法解析返回的JSON格式字符串。最后，調用showSuggestions函數將聯想詞展示在頁面上。 showSuggestions函數中，我們通過getElementById方法獲取到聯想詞的展示區域，并清空其中的內容。然后，使用createElement方法創建p標簽，將聯想詞添加到頁面上。 舉個例子，當用戶在搜索引擎的搜索框中輸入關鍵詞"ajax"時，頁面會實時展示與"ajax"相關的聯想詞。比如，用戶輸入"a"時，頁面可能會出現"ajax", "amazon", "apple"等聯想詞；當用戶輸入"aj"時，頁面會刷新，僅展示與"aj"相關的聯想詞，如"ajax", "ajax tutorial"等。 總之，使用Ajax實現文本框聯想功能可以提升用戶的輸入體驗和效率。通過異步請求服務器，實時展示與用戶輸入相關的聯想詞，不僅可以幫助用戶準確輸入關鍵詞，還可以提供更準確的搜索結果。這種技術在實際開發中非常常見，能夠廣泛應用于各種在線搜索、地址自動補全等功能中。