Web 应用程序经常需要自动完成（Autocomplete）这种用户输入的功能，以提高用户体验和工作效率。本文将介绍如何使用纯 JavaScript 实现自动完成功能，而不依赖于任何外部库。
实现原理
要实现自动完成，我们需要做以下几件事情：
- 监听用户输入的事件。
- 根据用户已经输入的内容，过滤出可能的候选项列表。
- 在一个下拉列表中显示候选项。
- 当用户选择某个候选项时，把它填入输入框中。
实现步骤
第一步：监听用户输入事件
我们需要监听用户在输入框中的输入事件，当用户输入变化时，我们就需要重新计算候选项列表并显示出来。我们可以使用 input 事件监听输入框的输入变化：
const input = document.querySelector('#input-id');
input.addEventListener('input', function() {
// 处理用户输入变化
});第二步：计算候选项列表
为了计算候选项列表，我们需要一个数据源，它包含了所有可选的项。这些项可以是一个数组、一个对象等等。我们需要使用 filter() 方法来根据用户输入来过滤出候选项：
const candidates = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
function filterCandidates(inputText) {
return candidates.filter(function(candidate) {
return candidate.toLowerCase().startsWith(inputText.toLowerCase());
});
}上面的 filterCandidates() 函数将返回一个数组，它包含所有以用户输入的文本开头的候选项。
第三步：在下拉列表中显示候选项
当候选项列表被计算出来后，我们需要把它们显示在下拉列表中。我们可以使用 HTML 和 CSS 来创建一个下拉列表：
<div class="autocomplete"> <input id="input-id" type="text"> <div class="dropdown"></div> </div>
-- -------------------- ---- ------- ------------- --------- - --------- --------- -------- -- ----------------- ----- ------- --- ----- ----- ----------- ------ ----------- ------- -------- ----- - ------------- --------- ----- - -------- ---- ------- -------- - ------------- --------- ----------- - ----------------- -------- -
这里的 .autocomplete 类是整个自动完成组件的容器，包含了一个输入框和一个下拉列表。下拉列表使用绝对定位来覆盖输入框，并使用 display: none 属性来隐藏。
接着，我们需要在 JavaScript 中更新下拉列表的内容：
-- -------------------- ---- -------
----- -------- - ------------------------------------- ------------
-------- ------------------- -
------------------ - ---
---------------------------- -
----- --- - ------------------------------
--------------------------
--------------- - -----
--------------------------
---
---------------------- - --------
-上面的 showDropdown() 函数将传入的候选项数组列表渲染为一个下拉列表，并显示出来。
第四步：处理选中候选项事件
当用户点击了某个候选项时，我们需要把它填入输入框中并隐藏下拉列表。我们可以使用 click 事件监听候选项的点击事件：
dropdown.addEventListener('click', function(event) {
if (event.target.classList.contains('item')) {
input.value = event.target.textContent;
dropdown.style.display = 'none';
}
});当用户点击某个候选项时，我们将该项的文本内容填入输入框，并隐藏下拉列表。
完整代码示例
下面是完整的自动完成组件实现代码示例：
<div class="autocomplete"> <input id="input-id" type="text"> < > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/27082) ，转载请注明来源 [https://www.javascriptcn.com/post/27082](https://www.javascriptcn.com/post/27082)