JavaScript 自动完成 - Javascript

对于网站或应用程序的输入框，自动完成是一个非常流行的功能。当用户在输入框中键入一些字符时，该功能将自动显示一个下拉框，其中包含与其输入的字符匹配的建议或选项。

在本文中，我们将介绍如何使用JavaScript实现自动完成功能。

HTML

首先，我们需要创建一个输入框和下拉框，在HTML中进行如下设置：

<input type="text" id="inputBox">
<div id="optionBox"></div>

注意输入框和下拉框的ID是"inputBox"和"optionBox"。

JavaScript

接下来，我们将使用JavaScript创建自动完成功能，需要在代码中添加以下脚本：

const inputBox = document.querySelector('#inputBox');
const optionBox = document.querySelector('#optionBox');

const options = ['apple', 'banana', 'cherry', 'date', 'elderberry', 'fig', 'grape'];

inputBox.addEventListener('keyup', function() {
  const input = inputBox.value;
  optionBox.innerHTML = '';
  const suggestions = options.filter(option => option.startsWith(input));
  suggestions.forEach(suggested => {
    const div = document.createElement('div');
    div.innerText = suggested;
    div.addEventListener('click', function() {
      inputBox.value = suggested;
      optionBox.innerHTML = '';
    });
    optionBox.appendChild(div);
  });
});

代码解释：

1. 通过JavaScript选择带有ID "inputBox" 和 "optionBox" 的HTML元素。
2. 生成一个包含所有选项的数组。
3. 使用事件监听器，以便当用户按键时，从输入框中获取文本。
4. 清空下拉框的内容。
5. 过滤选项数组以获取与用户输入匹配的选择项。
6. 遍历建议数组以创建下拉框元素，并在鼠标单击时更新输入框值。

实例

运行此代码，当用户键入以"a"开头的字符时，下拉框将显示与"a"相匹配的所有选项。

感谢您阅读本文！

参考

• 实现一个简单的自动完成组件
• JS实现搜索框的自动补全功能