Bagaimana untuk melaksanakan fungsi kotak input penyiapan automatik dalam JavaScript?-tutorial js-php.cn

Bagaimana untuk melaksanakan fungsi kotak input penyiapan automatik dalam JavaScript?

WBOY

Lepaskan： 2023-10-20 12:39:11

asal

869 orang telah melayarinya

JavaScript 如何实现自动补全输入框功能？

Bagaimana untuk melaksanakan fungsi kotak input autolengkap dalam JavaScript?

Dalam pembangunan web, kotak input autolengkap adalah ciri yang sangat biasa Ia boleh memberikan kaedah input yang cepat, mudah dan tepat serta meningkatkan pengalaman pengguna. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan fungsi kotak input autolengkap dan memberikan contoh kod khusus.

1. Struktur HTML

Pertama, kita perlu menyediakan struktur HTML yang mengandungi kotak input. Contohnya adalah seperti berikut:

<input type="text" id="autocomplete-input" placeholder="请输入关键字">
<ul id="autocomplete-list"></ul>

Salin selepas log masuk

Dalam contoh di atas, kami menggunakan elemen <input> sebagai kotak input, tetapkan id kepada "autocomplete-input", dan tambah atribut pemegang tempat. Selain itu, kami menggunakan elemen <ul> sebagai senarai gesaan autolengkap dan menetapkan id sebagai "senarai lengkap automatik". <input> 元素作为输入框，设置了一个 id 为 "autocomplete-input"，并添加了一个 placeholder 属性。另外，我们使用一个 <ul> 元素作为自动补全的提示列表，设置了一个 id 为 "autocomplete-list"。

二、JavaScript 实现

接下来，我们需要编写 JavaScript 代码实现自动补全功能。首先，我们需要监听输入框的输入事件，并获取用户输入的关键字。然后，我们可以通过 Ajax 请求获取与输入关键字相关的数据，并将其展示在自动补全的提示列表中。

以下是一个简单的实现示例：

// 获取输入框和提示列表
var input = document.getElementById('autocomplete-input');
var list = document.getElementById('autocomplete-list');

// 监听输入框的输入事件
input.addEventListener('input', function() {
  var keyword = input.value;
  
  // 发送请求获取与关键字相关的数据
  // 这里可以根据实际情况进行后端接口的调用
  
  // 示例中使用一个静态的数据源来模拟请求
  var data = ['apple', 'banana', 'orange', 'grape', 'pineapple'];
  
  // 清空提示列表
  list.innerHTML = '';

  // 遍历数据，在提示列表中插入匹配的项
  for (var i = 0; i < data.length; i++) {
    if (data[i].indexOf(keyword) !== -1) {
      var item = document.createElement('li');
      item.textContent = data[i];
      list.appendChild(item);
    }
  }
});

Salin selepas log masuk

在上述示例中，我们首先获取输入框和提示列表的 DOM 元素，并利用 addEventListener 方法监听输入框的 input 事件。在事件处理函数中，我们通过 value 属性获取用户输入的关键字。

然后，我们可以发送 Ajax 请求，获取与关键字相关的数据。在示例中，为了简化代码，我们使用了一个静态的数据源来模拟请求，具体实现时需要根据实际情况进行后端接口的调用。

接下来，我们通过遍历数据数组，在提示列表中插入与关键字匹配的项。通过创建 <li> 元素，并利用 textContent

2. Pelaksanaan JavaScript

Seterusnya, kita perlu menulis kod JavaScript untuk melaksanakan fungsi penyiapan automatik. Pertama, kita perlu mendengar peristiwa input kotak input dan mendapatkan kata kunci yang dimasukkan oleh pengguna. Kami kemudiannya boleh mendapatkan data yang berkaitan dengan kata kunci yang dimasukkan melalui permintaan Ajax dan memaparkannya dalam senarai segera autolengkap.

Berikut ialah contoh pelaksanaan mudah:

#autocomplete-list {
  border: 1px solid #ccc;
  list-style: none;
  padding: 0;
  max-height: 200px;
  overflow-y: auto;
}

#autocomplete-list li {
  padding: 5px;
  cursor: pointer;
}

#autocomplete-list li:hover {
  background-color: #f1f1f1;
}

Salin selepas log masuk

Dalam contoh di atas, kami mula-mula mendapatkan elemen DOM kotak input dan senarai gesaan, dan gunakan kaedah addEventListener untuk mendengar acara input daripada kotak input. Dalam fungsi pengendali acara, kami memperoleh kata kunci yang dimasukkan oleh pengguna melalui atribut value.

Kemudian kami boleh menghantar permintaan Ajax untuk mendapatkan data yang berkaitan dengan kata kunci. Dalam contoh, untuk memudahkan kod, kami menggunakan sumber data statik untuk mensimulasikan permintaan Pelaksanaan khusus perlu memanggil antara muka bahagian belakang mengikut situasi sebenar.

Seterusnya, kami memasukkan item yang sepadan dengan kata kunci ke dalam senarai segera dengan menggelung melalui tatasusunan data. Dengan mencipta elemen <li>, menetapkan kandungan teksnya menggunakan atribut textContent dan akhirnya menambahkannya pada senarai gesaan. 🎜🎜3. Mencantikkan gaya🎜🎜Akhir sekali, kami boleh mencantikkan senarai segera autolengkap untuk meningkatkan pengalaman pengguna. Anda boleh menetapkan gaya senarai gesaan melalui CSS, contohnya: 🎜rrreee🎜Dalam contoh di atas, kami menetapkan gaya sempadan, gaya senarai, pelapik, ketinggian maksimum dan bar skrol senarai gesaan. 🎜🎜Melalui langkah di atas, kami boleh melaksanakan fungsi kotak input lengkap automatik yang ringkas. Apabila pengguna memasukkan kata kunci, data yang berkaitan dicari secara automatik dan item yang sepadan dipaparkan dalam senarai segera. Pengguna boleh memilih dan memilih item melalui tetikus atau papan kekunci untuk mencapai penyiapan automatik. 🎜🎜Perlu diingat bahawa contoh di atas hanyalah pelaksanaan yang mudah, dan situasi sebenar mungkin memerlukan logik pemprosesan yang lebih kompleks dan kerjasama antara muka belakang. Walau bagaimanapun, dengan memahami prinsip dan contoh di atas, ia boleh membantu kami melaksanakan dan menyesuaikan fungsi kotak input autolengkap dengan lebih baik. 🎜

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