JavaScript 实现表单自动补全选择功能的方法

在现代网页设计中，表单自动补全选择功能极大地提升了用户体验，它能根据用户输入的内容，快速提供相关的建议选项，让用户能够更便捷地完成表单填写。使用 JavaScript 可以轻松实现这一实用功能。

我们需要获取表单元素以及用于显示建议选项的容器。可以通过 document.getElementById 方法来获取对应的 DOM 元素。例如：

const input = document.getElementById('myInput');
const suggestionsContainer = document.getElementById('suggestions');

接下来，为输入框添加 input 事件监听器，以便在用户输入时触发自动补全逻辑。在事件处理函数中，我们获取用户输入的值，并与预先准备好的数据集进行匹配。

input.addEventListener('input', function () {
  const inputValue = this.value.toLowerCase();
  const data = ['apple', 'banana', 'cherry', 'date']; // 示例数据集
  const suggestions = [];

  data.forEach(function (item) {
    if (item.toLowerCase().startsWith(inputValue)) {
      suggestions.push(item);
    }
  });

  displaySuggestions(suggestions);
});

上述代码中，我们遍历数据集，将以用户输入值开头的选项添加到 suggestions 数组中。然后调用 displaySuggestions 函数来显示这些建议选项。

function displaySuggestions(suggestions) {
  suggestionsContainer.innerHTML = '';

  suggestions.forEach(function (suggestion) {
    const listItem = document.createElement('li');
    listItem.textContent = suggestion;
    listItem.addEventListener('click', function () {
      input.value = this.textContent;
      suggestionsContainer.innerHTML = '';
    });
    suggestionsContainer.appendChild(listItem);
  });
}

在 displaySuggestions 函数中，我们首先清空建议选项容器，然后为每个建议选项创建一个列表项，并添加点击事件监听器。当用户点击某个建议选项时，将该选项的值填充到输入框中，并清空建议选项容器。

为了让用户可以通过键盘上下箭头键在建议选项中导航，我们还可以添加键盘事件监听器。

input.addEventListener('keydown', function (event) {
  const suggestions = suggestionsContainer.querySelectorAll('li');
  const key = event.keyCode;

  if (key === 40) { // 向下箭头
    event.preventDefault();
    // 切换到下一个建议选项
  } else if (key === 38) { // 向上箭头
    event.preventDefault();
    // 切换到上一个建议选项
  }
});

通过以上步骤，我们就利用 JavaScript 成功实现了表单自动补全选择功能，为用户提供了更加流畅和高效的表单填写体验。这种功能在实际项目中能有效减少用户输入错误，提高数据准确性，值得广泛应用。