Menggunakan JavaScript untuk melaksanakan autolengkap borang

Gunakan JavaScript untuk melaksanakan fungsi auto-lengkap borang

Dengan perkembangan Internet, borang web memainkan peranan yang sangat penting dalam kehidupan seharian kita. Untuk meningkatkan pengalaman pengguna dan memberikan pengguna lebih banyak kemudahan, fungsi auto-lengkap borang telah menjadi ciri yang sangat diperlukan. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan fungsi autolengkap borang dan memberikan contoh kod yang sepadan.

Pertama, kami memerlukan pangkalan data atau sumber data yang mengandungi pilihan autolengkap. Pilihan ini boleh disediakan terlebih dahulu oleh kami sendiri atau diperoleh daripada pelayan. Dalam artikel ini, kami akan menggunakan tatasusunan ringkas sebagai sumber data, contohnya adalah seperti berikut:

var autofillOptions = ["apple", "banana", "cherry", "durian", "elderberry", "fig", "grape", "honeydew", "imbe", "jackfruit"];

Seterusnya, kami perlu menambah pendengar acara untuk elemen borang yang pengguna masukkan. Apabila pengguna mula menaip, kami akan memaparkan pilihan autolengkap. Contoh kod adalah seperti berikut:

var inputElement = document.getElementById("input"); // 获取表单元素 inputElement.addEventListener("input", function() { var inputText = inputElement.value; // 获取用户输入的文本 var autocompleteList = document.getElementById("autocomplete-list"); // 获取自动补全选项列表元素 // 清空自动补全选项列表 autocompleteList.innerHTML = ""; // 遍历数据源，匹配用户输入的文本 autofillOptions.forEach(function(option) { if (option.startsWith(inputText)) { // 创建一个自动补全选项项 var optionElement = document.createElement("div"); optionElement.textContent = option; // 添加点击事件监听器，将选项填入表单元素 optionElement.addEventListener("click", function() { inputElement.value = option; autocompleteList.innerHTML = ""; }); // 将选项添加到自动补全选项列表中 autocompleteList.appendChild(optionElement); } }); });

Dalam kod di atas, kami mula-mula mendapatkan elemen borang yang dimasukkan oleh pengguna dan menambah pendengar acarainputpada elemen tersebut. Setiap kali pengguna memasukkan, pendengar acara akan dicetuskan dan secara dinamik menjana pilihan autolengkap berdasarkan teks yang dimasukkan oleh pengguna.input事件监听器。在用户每次输入时，该事件监听器会被触发，并根据用户输入的文本，动态生成自动补全选项。

接下来，我们遍历数据源中的每一个选项，使用startsWith()方法来判断该选项是否以用户输入的文本开头。如果是的话，我们创建一个包含选项文本的div元素，并为该元素添加了一个点击事件监听器。该监听器会在用户点击选项时，将选项填入表单元素，并清空自动补全选项列表。

最后，我们将生成的自动补全选项添加到一个名为autocomplete-list

Atas ialah kandungan terperinci Menggunakan JavaScript untuk melaksanakan autolengkap borang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!