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 acara input pada 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

Seterusnya, kami mengulangi setiap pilihan dalam sumber data dan menggunakan kaedah startsWith() untuk menentukan sama ada pilihan bermula dengan teks yang dimasukkan oleh pengguna. Jika ya, kami mencipta elemen div yang mengandungi teks pilihan dan menambah pendengar acara klik pada elemen tersebut. Pendengar ini akan mengisi elemen borang dengan pilihan dan mengosongkan senarai pilihan autolengkap apabila pengguna mengklik pada pilihan.

Akhir sekali, kami menambah pilihan autolengkap yang dijana pada elemen yang dipanggil senarai lengkap automatik. Anda boleh mentakrifkan elemen ini sebagai senarai lungsur turun tersembunyi atau gunakan gaya untuk menyembunyikannya. 🎜🎜Untuk meringkaskan, menggunakan JavaScript untuk melaksanakan fungsi autolengkap borang boleh meningkatkan pengalaman pengguna dan membolehkan pengguna memasuki kandungan borang dengan lebih cepat. Kami boleh melaksanakan ciri ini dengan mudah dengan mendengar peristiwa input unsur borang, menjana pilihan autolengkap secara dinamik dan mengisi elemen borang apabila pengguna mengklik pada pilihan. Saya harap contoh kod yang disediakan dalam artikel ini akan membantu anda. 🎜

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