JavaScript | 自动完成建议功能

自动完成建议功能（autocomplete）是一种非常常见的功能，特别是在输入框中。这种功能可以帮助用户更快地找到他们想要的选项，提高用户体验。在本篇文章中，我们将学习如何使用 JavaScript 实现自动完成建议功能。

基础概念

在实现自动完成建议功能之前，我们需要了解一些基础概念。

输入框

输入框是用户输入信息的一个基本的 UI 组件。通常，输入框是一个文本框，可以接受用户的输入。

<input type="text" placeholder="请输入...">

数据源

数据源是自动完成建议功能中非常重要的一部分。数据源是一个包含所有可用选项的列表，当用户输入关键词时，自动完成建议功能会从数据源中查找匹配的选项。

我们可以使用一个静态的数组来作为数据源，也可以从服务器端动态获取数据。

const dataSource = ['Apple', 'Banana', 'Cherry', 'Date', 'Eggplant'];

监听事件

自动完成建议功能需要监听输入框的输入事件（input），当用户输入时，自动完成建议功能会从数据源中查找匹配的选项，并将匹配的选项展示出来。

const inputElement = document.querySelector('#input');
inputElement.addEventListener('input', onInput);

展示选项

自动完成建议功能展示选项的方式可以是下拉框、列表或者是一个类似搜索引擎的下拉列表。在本文中，我们将使用一个简单的下拉框来展示选项。

<div class="autocomplete">
  <input type="text" id="input">
  <ul class="autocomplete-items"></ul>
</div>

实现自动完成建议功能

了解了基础概念，下面我们可以开始实现自动完成建议功能了。

编写 HTML 结构

首先，我们需要编写一个简单的 HTML 结构，包含一个输入框和一个下拉框用于展示选项。

<div class="autocomplete">
  <input type="text" id="input">
  <ul class="autocomplete-items"></ul>
</div>

编写 JavaScript 代码

在 JavaScript 代码中，我们需要编写以下几个方法。

onInput 方法

onInput 方法是监听输入框输入事件的处理函数。当用户输入时，该方法会调用 getItems 方法从数据源中获取匹配的选项，并调用 showItems 方法展示匹配的选项。

function onInput() {
  const value = this.value.trim().toLowerCase();
  const items = getItems(value);
  showItems(items);
}

getItems 方法

getItems 方法是从数据源中获取匹配的选项。该方法会遍历数据源中的每个选项，如果该选项包含输入的关键词，则将该选项添加到一个新数组中并返回。

function getItems(value) {
  const items = [];
  dataSource.forEach(item => {
    if (item.toLowerCase().indexOf(value) !== -1) {
      items.push(item);
    }
  });
  return items;
}

showItems 方法

showItems 方法用于展示匹配的选项。该方法会将选项添加到下拉框中，并为每个选项绑定事件，当用户点击选项时，输入框的值会被更新为该选项的值。

function showItems(items) {
  const dropdown = document.querySelector('.autocomplete-items');
  dropdown.innerHTML = '';
  items.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item;
    li.addEventListener('click', () => {
      inputElement.value = item;
      dropdown.innerHTML = '';
    });
    dropdown.appendChild(li);
  });
}

完整代码

const inputElement = document.querySelector('#input');
inputElement.addEventListener('input', onInput);

const dataSource = ['Apple', 'Banana', 'Cherry', 'Date', 'Eggplant'];

function onInput() {
  const value = this.value.trim().toLowerCase();
  const items = getItems(value);
  showItems(items);
}

function getItems(value) {
  const items = [];
  dataSource.forEach(item => {
    if (item.toLowerCase().indexOf(value) !== -1) {
      items.push(item);
    }
  });
  return items;
}

function showItems(items) {
  const dropdown = document.querySelector('.autocomplete-items');
  dropdown.innerHTML = '';
  items.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item;
    li.addEventListener('click', () => {
      inputElement.value = item;
      dropdown.innerHTML = '';
    });
    dropdown.appendChild(li);
  });
}

总结

自动完成建议功能是一个非常方便和实用的功能，在处理大量选项时可以提高用户体验和效率。在本文中，我们学习了如何使用 JavaScript 实现自动完成建议功能。通过了解基础概念和学习实现方法，相信读者可以快速而容易地在自己的项目中使用该功能。