当我们在搜索引擎或者电商平台的搜索框中输入关键词时，通常会看到搜索框下面出现关键词的提示或者搜索结果的推荐。这就是 autocomplete 功能，可以帮助用户快速、准确地输入搜索关键词。
在 Vue.js 中，可以使用第三方库或者自己实现 autocomplete 功能。下面我们来介绍如何使用 Vue.js 实现搜索框的 autocomplete 功能。
1. 使用第三方库
Vue.js 生态圈中有很多和 autocomplete 相关的第三方库，比如 vue-awesomplete、vue-autosuggest、vue2-autocomplete 等等。这些库使用方便、功能完善，可以满足大部分需求。
下面以 vue-awesomplete 为例，介绍如何使用它实现搜索框的 autocomplete 功能。
安装和使用
首先，使用 npm 安装 vue-awesomplete：
npm install --save vue-awesomplete
然后在组件中使用 vue-awesomplete：
-- -------------------- ---- -------
----------
-----
------ ----------- ---------------- --
----
--- --------------- ------ -- -------- --------------- ------ -------
-----
------
-----------
--------
------ ----------- ---- ------------------
------ ------- -
----------- - ----------- --
------ -
------ -
------- ---
-------- ---
--
--
-------- -
----- -------------- -
-- ----- ------------------- ---- --
----- -------- - ----- ---------------------------------------------------------------------
----- ---- - ----- ----------------
----- ------- - ------------------- -- ----------------
------------ - --------
--
--
------ -
-------- -
--------------------
--
--
--
---------通过 v-model 绑定搜索框的值，通过 watch 监听搜索框的值的变化，并通过 searchAction 方法获取搜索结果，在搜索结果发生变化时更新 results 数组，最后在模板中循环输出搜索结果。
配置和样式
vue-awesomplete 提供了很多可配置的选项，比如 minChars 指定输入最小字符数、maxItems 指定最多显示项数、item 指定模板等等。可以参考官方文档实现更多自定义功能：https://github.com/LeaVerou/awesomplete#api
另外还需要引入 awesomplete 的 CSS 样式，默认情况下，这些样式不会自动应用到我们的组件中。可以在组件内加入以下代码：
<style> @import 'vue-awesomplete/lib/vue-awesomplete.css'; </style>
2. 自己实现
虽然使用第三方库可以方便快捷地实现 autocomplete 功能，但是了解如何自己实现也很重要，可以更好地掌握 Vue.js 中的一些基本概念和实践技巧，加深对其的理解。
下面介绍如何自己实现搜索框的 autocomplete 功能。
定义组件
首先，定义 Autocomplete 组件，包含一个输入框和下拉菜单：
-- -------------------- ---- -------
----------
---- ---------------------
------ ----------- ---------------- --
---- ------------ ----------------------
----
--- --------------- ------ -- -------- -------------
-- -------- -------------------------------------- ------ ------
-----
-----
------
------
-----------v-model 绑定搜索框的值到 search 变量上，v-if 根据结果数组的长度来判断是否显示下拉菜单，v-for 循环结果数组，动态渲染下拉菜单的选项，点击选项时调用 selectItem 方法选中选项。
-- -------------------- ---- ------- ------------- - --------- --------- - ----- - --------- --------- ---- ----- ------- --- ----- ----- ----------------- ------ ----------- ------ --------- ----- ------ ----- - ----- -- - ------- -- -------- -- ----------- ----- - ----- -- - ------- -- -------- -- - ----- - - -------- ------ -------- --- ----- ---------------- ----- ------ ----- - ----- ------- - ----------------- -------- -
定义 CSS 样式，使下拉菜单定位在搜索框下面，具有基本的样式。
添加数据
在 Autocomplete 组件中定义 data 属性 results 和 keywords，其中 results 保存搜索结果，keywords 保存数据源，可以是本地数组或者异步请求返回的数据：
-- -------------------- ---- -------
------ -
------ -
------- ---
-------- ---
--------- -
-------- --------- --------- ------- -------------
------ ------------- ----------- ------- -----
--
--
--在 created 钩子函数中加载数据，这里使用本地数组 keywords：
created() {
this.keywords.sort();
},监听输入框的值
使用 watch 监听搜索框的值的变化，并根据输入的值从数据源中查找匹配的项：
-- -------------------- ---- -------
------ -
-------- -
-- ------------------- -- -- -
------------ - ---------------------------- --
-----------------------------------------------------------
- ---- -
------------ - ---
-
--
--当输入框的值长度大于等于 2 时，使用 JS 的 filter 方法过滤数据源中包含搜索框的值的项，并将结果保存到 results 中。
当输入框的值长度小于 2 时，清空结果数组。
选中项
在 selectItem 方法中将选中的项赋值给 search 变量，并清空结果数组：
selectItem(item) {
this.search = item;
this.results = [];
},完整代码
-- -------------------- ---- -------
----------
---- ---------------------
------ ----------- ---------------- --
---- ------------ ----------------------
----
--- --------------- ------ -- -------- -------------
-- -------- -------------------------------------- ------ ------
-----
-----
------
------
-----------
--------
------ ------- -
------ -
------ -
------- ---
-------- ---
--------- -
-------- --------- --------- ------- -------------
------ ------------- ----------- ------- -----
--
--
--
--------- -
---------------------
--
-------- -
---------------- -
----------- - -----
------------ - ---
--
--
------ -
-------- -
-- ------------------- -- -- -
------------ - ---------------------------- --
-----------------------------------------------------------
- ---- -
------------ - ---
-
--
--
--
---------
-------
------------- -
--------- ---------
-
----- -
--------- ---------
---- -----
------- --- ----- -----
----------------- ------
----------- ------
--------- -----
------ -----
-
----- -- -
------- --
-------- --
----------- -----
-
----- -- -
------- --
-------- --
-
----- - -
-------- ------
-------- --- -----
---------------- -----
------ -----
-
----- ------- -
----------------- --------
-
--------总结
Vue.js 中实现搜索框的 autocomplete 功能，可以使用第三方库或者自己实现。使用第三方库可以方便快捷地实现自己的需求，尤其针对复杂的场景。而自己实现可以更好地掌握 Vue.js 中的基本概念和实践技巧，加深对其的理解。
以上是 Vue.js 实现搜索框的 autocomplete 功能的详细讲解和示例代码，希望对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ba162dadd4f0e0ff2a23d4