Bagaimana untuk melaksanakan fungsi pemilihan penyiapan automatik borang dalam JavaScript?-tutorial js-php.cn

Bagaimana untuk melaksanakan fungsi pemilihan penyiapan automatik borang dalam JavaScript?

WBOY

Lepaskan： 2023-10-20 14:54:32

asal

1319 orang telah melayarinya

JavaScript 如何实现表单的自动补全选择功能？

Bagaimana untuk melaksanakan fungsi pemilihan pelengkap automatik borang dalam JavaScript?

Dalam pembangunan bahagian hadapan, fungsi pemilihan lengkap auto bentuk adalah keperluan yang sangat biasa. Melalui fungsi ini, pengguna boleh memilih pilihan yang sepadan dengan mudah daripada senarai yang telah ditetapkan untuk diisi tanpa input manual. Dalam artikel ini, kami akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan fungsi pemilihan autolengkap borang dan memberikan contoh kod khusus.

Untuk melaksanakan fungsi pemilihan autolengkap borang, kami boleh menggunakan acara input kotak input teks untuk mendengar input pengguna dan menggunakan JavaScript untuk menapis dan memaparkan pilihan padanan berdasarkan input pengguna. input事件来监听用户输入，并使用 JavaScript 来根据用户的输入进行筛选和显示匹配的选项。

首先，我们需要在 HTML 中添加一个文本输入框和一个用于显示选项的下拉列表。文本输入框用于用户输入，下拉列表用于显示匹配的选项。示例代码如下：

<input type="text" id="input" />
<select id="select"></select>

Salin selepas log masuk

接下来，我们使用 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);
  });
});

Salin selepas log masuk

通过上述代码，我们定义了一个包含所有选项的数组options，并在文本输入框的input事件中监听用户输入。在事件处理程序中，首先获取用户输入的值并转换为小写字母，然后使用filter方法对选项数组进行筛选，选出所有包含用户输入值的选项。最后，将筛选出的选项逐个添加到下拉列表中。

在编写完上述代码后，我们可以在浏览器中运行页面来查看效果。当用户在文本输入框中输入内容时，下拉列表将会根据输入的内容进行实时的自动补全选择。

总结：
通过使用 JavaScript，我们可以轻松地实现表单的自动补全选择功能。通过监听文本输入框的input

Pertama, kita perlu menambah kotak input teks dan senarai lungsur untuk memaparkan pilihan dalam HTML. Kotak input teks digunakan untuk input pengguna dan senarai juntai bawah digunakan untuk memaparkan pilihan padanan. Kod sampel adalah seperti berikut: 🎜rrreee🎜Seterusnya, kami menggunakan JavaScript untuk melaksanakan fungsi pemilihan autolengkap. Mula-mula kita perlu menentukan tatasusunan yang mengandungi semua pilihan, kemudian memproses input pengguna dalam acara input kotak input teks dan menapis serta memaparkan pilihan padanan berdasarkan kandungan input. 🎜🎜Kod sampel adalah seperti berikut: 🎜rrreee🎜Melalui kod di atas, kami menentukan tatasusunan pilihan yang mengandungi semua pilihan dan mendengar input pengguna dalam acara input bagi kotak input teks. Dalam pengendali acara, mula-mula dapatkan nilai yang dimasukkan oleh pengguna dan tukarkannya kepada huruf kecil, kemudian gunakan kaedah filter untuk menapis tatasusunan pilihan dan pilih semua pilihan yang mengandungi nilai yang dimasukkan oleh pengguna. . Akhir sekali, tambahkan pilihan yang ditapis pada senarai juntai bawah satu demi satu. 🎜🎜Selepas menulis kod di atas, kita boleh menjalankan halaman dalam pelayar untuk melihat kesannya. Apabila pengguna memasukkan kandungan dalam kotak input teks, senarai juntai bawah akan melengkapkan pemilihan secara automatik dalam masa nyata berdasarkan kandungan input. 🎜🎜Ringkasan:
Dengan menggunakan JavaScript, kami boleh melaksanakan fungsi pemilihan autolengkap borang dengan mudah. Dengan mendengar acara input kotak input teks dan menapis serta memaparkan pilihan yang dipratentukan berdasarkan input pengguna, kami boleh menyediakan antara muka pengguna yang mudah untuk membantu pengguna memilih pilihan dengan cepat. Contoh kod di atas memberikan kaedah pelaksanaan yang boleh anda laraskan dan lanjutkan mengikut keperluan sebenar. 🎜

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi pemilihan penyiapan automatik borang dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!