Web 应用程序经常需要自动完成（Autocomplete）这种用户输入的功能，以提高用户体验和工作效率。本文将介绍如何使用纯 JavaScript 实现自动完成功能，而不依赖于任何外部库。
实现原理
要实现自动完成，我们需要做以下几件事情：
- 监听用户输入的事件。
- 根据用户已经输入的内容，过滤出可能的候选项列表。
- 在一个下拉列表中显示候选项。
- 当用户选择某个候选项时，把它填入输入框中。
实现步骤
第一步：监听用户输入事件
我们需要监听用户在输入框中的输入事件，当用户输入变化时，我们就需要重新计算候选项列表并显示出来。我们可以使用 input 事件监听输入框的输入变化：
----- ----- - ------------------------------------ ------------------------------- ---------- - -- -------- ---
第二步：计算候选项列表
为了计算候选项列表，我们需要一个数据源，它包含了所有可选的项。这些项可以是一个数组、一个对象等等。我们需要使用 filter() 方法来根据用户输入来过滤出候选项：
----- ---------- - --------- --------- --------- ------- --------------
-------- --------------------------- -
------ ------------------------------------- -
------ ------------------------------------------------------------
---
-上面的 filterCandidates() 函数将返回一个数组，它包含所有以用户输入的文本开头的候选项。
第三步：在下拉列表中显示候选项
当候选项列表被计算出来后，我们需要把它们显示在下拉列表中。我们可以使用 HTML 和 CSS 来创建一个下拉列表：
---- --------------------- ------ ------------- ------------ ---- ----------------------- ------
------------- --------- - --------- --------- -------- -- ----------------- ----- ------- --- ----- ----- ----------- ------ ----------- ------- -------- ----- - ------------- --------- ----- - -------- ---- ------- -------- - ------------- --------- ----------- - ----------------- -------- -
这里的 .autocomplete 类是整个自动完成组件的容器，包含了一个输入框和一个下拉列表。下拉列表使用绝对定位来覆盖输入框，并使用 display: none 属性来隐藏。
接着，我们需要在 JavaScript 中更新下拉列表的内容：
----- -------- - ------------------------------------- ------------
-------- ------------------- -
------------------ - ---
---------------------------- -
----- --- - ------------------------------
--------------------------
--------------- - -----
--------------------------
---
---------------------- - --------
-上面的 showDropdown() 函数将传入的候选项数组列表渲染为一个下拉列表，并显示出来。
第四步：处理选中候选项事件
当用户点击了某个候选项时，我们需要把它填入输入框中并隐藏下拉列表。我们可以使用 click 事件监听候选项的点击事件：
---------------------------------- --------------- -
-- ----------------------------------------- -
----------- - -------------------------
---------------------- - -------
-
---当用户点击某个候选项时，我们将该项的文本内容填入输入框，并隐藏下拉列表。
完整代码示例
下面是完整的自动完成组件实现代码示例：
---- --------------------- ------ ------------- ------------ - - ----------------------------------------------------------- -------- ---------------------------------------------------------------------------------------