Bagaimana untuk menggunakan JavaScript untuk merealisasikan fungsi segera penyiapan automatik kandungan kotak input borang?-tutorial js-php.cn

Bagaimana untuk menggunakan JavaScript untuk merealisasikan fungsi segera penyiapan automatik kandungan kotak input borang?

王林

Lepaskan： 2023-10-24 12:19:46

asal

1602 orang telah melayarinya

如何使用 JavaScript 实现表单的输入框内容自动补全提示功能？

Bagaimana untuk menggunakan JavaScript untuk melaksanakan fungsi gesaan pelengkapan automatik kandungan kotak input borang?

Dengan perkembangan Internet, fungsi cepat lengkap automatik bagi kotak input borang menjadi semakin biasa. Apabila pengguna memasukkan kandungan, kemungkinan pilihan penyelesaian akan disediakan berdasarkan data sedia ada untuk memudahkan pengguna memilih atau memasukkan maklumat yang betul dengan pantas. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan fungsi gesaan penyiapan automatik kandungan kotak input borang dan memberikan contoh kod khusus.

Langkah 1: Buat struktur HTML

Mula-mula, kita perlu mencipta struktur HTML ringkas dan menambah kotak input teks padanya. Contohnya adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表单自动补全提示</title>
</head>
<body>
    <form>
        <input type="text" id="inputBox" autocomplete="off">
    </form>

    <ul id="suggestionList"></ul>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, kami mencipta kotak input teks dengan id "inputBox" dan melumpuhkan fungsi autolengkap lalai (autocomplete="off"). Di samping itu, kami juga membuat senarai kosong tidak tertib ul untuk memaparkan pilihan gesaan auto-lengkap. autocomplete="off"）。另外，我们还创建了一个空的无序列表 ul，用于显示自动补全的提示选项。

第二步：实现 JavaScript 功能

接下来，我们使用 JavaScript 来实现表单的自动补全提示功能。在代码中，我们将监听输入框的键盘事件，当用户输入内容时，将根据已存在的数据生成并显示自动补全的提示选项。

// JavaScript 代码
var inputBox = document.getElementById('inputBox'); // 获取输入框元素
var suggestionList = document.getElementById('suggestionList'); // 获取提示选项的列表元素

// 模拟已存在的数据
var data = ['apple', 'banana', 'cherry', 'grape', 'orange'];

inputBox.addEventListener('input', function() {
    var inputValue = inputBox.value; // 获取输入框的值
    suggestionList.innerHTML = ''; // 清空提示选项列表

    // 根据输入内容生成提示选项
    var suggestions = data.filter(function(item) {
        return item.includes(inputValue);
    });

    suggestions.forEach(function(item) {
        var li = document.createElement('li');
        li.textContent = item;
        suggestionList.appendChild(li);
    });
});

// 点击提示选项时，将选项的值填入输入框
suggestionList.addEventListener('click', function(e) {
    var selectedValue = e.target.textContent;
    inputBox.value = selectedValue;
});

Salin selepas log masuk

在上述代码中，我们首先获取输入框元素和提示选项的列表元素。然后，我们模拟了一组已存在的数据（data）。接着，我们监听输入框的 input 事件，在用户输入内容时触发处理函数。

处理函数首先获取输入框的值，然后清空提示选项列表。之后，根据输入内容从已存在的数据中筛选出符合条件的提示选项。筛选过程中，我们使用了 includes

Langkah 2: Laksanakan fungsi JavaScript

Seterusnya, kami menggunakan JavaScript untuk melaksanakan fungsi gesaan autolengkap borang. Dalam kod, kami akan mendengar peristiwa papan kekunci kotak input Apabila pengguna memasukkan kandungan, pilihan gesaan autolengkap akan dijana dan dipaparkan berdasarkan data sedia ada.

rrreee

Dalam kod di atas, kami mula-mula mendapat elemen kotak input dan elemen senarai pilihan segera. Kemudian, kami mensimulasikan set data sedia ada. Seterusnya, kami mendengar peristiwa input kotak input dan mencetuskan fungsi pengendali apabila pengguna memasukkan kandungan.

Fungsi pemprosesan mula-mula mendapat nilai kotak input, dan kemudian mengosongkan senarai pilihan segera. Selepas itu, pilihan gesaan yang memenuhi syarat ditapis keluar daripada data sedia ada berdasarkan kandungan input. Semasa proses penapisan, kami menggunakan kaedah includes untuk menentukan sama ada data sedia ada mengandungi kandungan input. Akhir sekali, kami menambah pilihan gesaan yang dijana pada senarai pilihan gesaan satu demi satu. 🎜🎜Selain itu, kami juga mendengar peristiwa klik senarai pilihan gesaan Apabila pengguna mengklik pada pilihan gesaan, nilai pilihan diisi dalam kotak input. 🎜🎜Ringkasan: 🎜🎜Sangat mudah untuk menggunakan JavaScript untuk melaksanakan fungsi gesaan penyiapan automatik kandungan kotak input borang. Kita hanya perlu mendengar peristiwa input kotak input, menjana dan memaparkan pilihan gesaan berdasarkan data sedia ada, dan kemudian mengisi nilai kotak input apabila pengguna memilih pilihan. Dengan cara ini, pengguna boleh memasukkan maklumat yang betul dengan lebih mudah, meningkatkan pengalaman pengguna. Saya harap pengenalan dalam artikel ini dapat membantu semua orang. 🎜

Atas ialah kandungan terperinci Bagaimana untuk menggunakan JavaScript untuk merealisasikan fungsi segera penyiapan automatik kandungan kotak input borang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!