获取自动完成反应的价值 - Javascript

自动完成（AutoComplete）是前端开发中常用的一个交互特性。在用户输入时，浏览器会展示一些可选项，提供给用户进行选择，以便快速输入。

以下是在JavaScript中获取自动完成反应的价值的几个关键点：

##1. 获取输入框

在JavaScript中获取输入框有多种方法，取决于网站的结构和代码性质。以下是其中比较常用的方法：

const input = document.querySelector('input[type="text"]');

##2. 使用插件或库

有很多优秀的自动完成插件或库可供选择，使用它们可以更加轻松地构建自动完成功能。

一些流行的自动完成插件或库如下所示：

• jQuery Autocomplete
• Selectize.js
• Typeahead.js

这些库能够加速开发过程、提高开发效率，以及实现一些高级特性。

##3. 构建自定义自动完成功能

如果你需要构建自己的自动完成功能，以下是一些你需要注意的事项：

• 获取可选项数据
• 初始化自动完成UI
• 实现自动完成UI的显示和隐藏
• 处理选定的自动完成选项

以下是一个基本的自动完成的示例代码：

const input = document.querySelector('input[type="text"]');

const options = [
  { id: 1, value: 'Apple' },
  { id: 2, value: 'Banana' },
  { id: 3, value: 'Cherry' },
  { id: 4, value: 'Durian' },
  { id: 5, value: 'Grapefruit' },
  { id: 6, value: 'Orange' }
];

function createAutoCompleteUI() {
  const autoCompleteUI = document.createElement('div');
  const list = document.createElement('ul');
  autoCompleteUI.appendChild(list);

  options.forEach((option) => {
    const listItem = document.createElement('li');
    listItem.textContent = option.value;
    listItem.dataset.optionId = option.id;
    list.appendChild(listItem);
  });

  autoCompleteUI.classList.add('autocomplete');
  input.parentNode.appendChild(autoCompleteUI);

  return autoCompleteUI;
}

input.addEventListener('input', () => {
  // Display and hide the autocomplete UI based on input value
  const value = input.value;
  const autoCompleteUI = document.querySelector('.autocomplete');

  if (value.length > 0) {
    autoCompleteUI.classList.add('visible');
  } else {
    autoCompleteUI.classList.remove('visible');
  }

  // Filter and display the matched options
  const matchedOptions = options.filter((option) => {
    return option.value.toLowerCase().startsWith(value.toLowerCase());
  });

  // Display the matched options
  const list = autoCompleteUI.querySelector('ul');
  list.innerHTML = '';

  matchedOptions.forEach((option) => {
    const listItem = document.createElement('li');
    listItem.textContent = option.value;
    listItem.dataset.optionId = option.id;
    list.appendChild(listItem);
  });
});

// Handle selection of an option
const autoCompleteUI = createAutoCompleteUI();
autoCompleteUI.addEventListener('click', (event) => {
  const optionId = event.target.dataset.optionId;
  const selectedOption = options.find((option) => {
    return option.id == optionId;
  });

  input.value = selectedOption.value;
  autoCompleteUI.classList.remove('visible');
});

在以上代码中，我们首先获取了输入框，然后构建了自动完成的UI。我们监听输入框的输入事件，并展示或隐藏自动完成UI，然后过滤匹配的项，并将列表项渲染到自动完成UI中。最后，我们还需要为自动完成UI添加click事件，以响应用户的选择。