JavaScript 如何實作表單的自動補全選擇功能？
在前端開發中，表單自動補全選擇功能是一個非常常見的需求。透過此功能，使用者可以方便地從一個預先定義的清單中選擇相應的選項進行填寫，而不需要手動輸入。在本文中，我們將介紹如何使用 JavaScript 實作表單的自動補全選擇功能，並提供具體的程式碼範例。
要實現表單的自動補全選擇功能，我們可以使用文字輸入框的input事件來監聽使用者輸入，並使用JavaScript 來根據使用者的輸入進行篩選和顯示匹配的選項。
首先，我們需要在 HTML 中新增一個文字輸入框和一個用於顯示選項的下拉清單。文字輸入框用於使用者輸入，下拉列表用於顯示匹配的選項。範例程式碼如下：
<input type="text" id="input" /> <select id="select"></select>
接下來，我們使用 JavaScript 來實作自動補全選擇功能。我們首先需要定義一個包含所有選項的數組，然後在文字輸入框的input事件中處理使用者輸入，並根據輸入的內容進行篩選和顯示匹配的選項。
範例程式碼如下：
const options = ["Apple", "Banana", "Cherry", "Durian", "Grape", "Lemon", "Mango", "Orange", "Peach", "Pear"];
const input = document.getElementById("input");
const select = document.getElementById("select");
input.addEventListener("input", function() {
const inputValue = input.value.toLowerCase(); // 获取用户输入的值并转换为小写字母
// 清空下拉列表中的选项
select.innerHTML = "";
// 根据用户输入的值来筛选匹配的选项
const filteredOptions = options.filter(function(option) {
return option.toLowerCase().includes(inputValue);
});
// 将筛选出的选项添加到下拉列表中
filteredOptions.forEach(function(option) {
const optionElement = document.createElement("option");
optionElement.value = option;
select.appendChild(optionElement);
});
});透過上述程式碼，我們定義了一個包含所有選項的陣列options，並在文字輸入框的input事件中監聽使用者輸入。在事件處理程序中，首先取得使用者輸入的值並轉換為小寫字母，然後使用filter方法對選項陣列進行篩選，選出所有包含使用者輸入值的選項。最後，將篩選出的選項逐一加入到下拉清單中。
在寫完上述程式碼後，我們可以在瀏覽器中執行頁面來查看效果。當使用者在文字輸入框中輸入內容時，下拉清單將會根據輸入的內容進行即時的自動補全選擇。
總結：
透過使用 JavaScript，我們可以輕鬆地實作表單的自動補全選擇功能。透過監聽文字輸入框的input事件，並根據使用者的輸入對預先定義的選項進行篩選和顯示，我們可以提供一個便捷的使用者介面，幫助使用者快速選擇選項。上述程式碼範例給出了一種實現方式，您可以根據實際需求進行調整和擴展。
以上是JavaScript 如何實現表單的自動補全選擇功能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
