简介
vue-autosuggest2 是一个非常优秀的基于 Vue.js 框架的自动提示库，使用方便且功能强大。大家在开发一些表单数据选择页面时，经常需要用户输入任意文字，再通过自动提示提供合适的选择项，这时候 vue-autosuggest2 就是非常好的选择了。
功能说明
vue-autosuggest2 目前的特性如下：
- 支持向上/向下箭头控制选择项
- 支持鼠标点击选择项
- 支持多种自定义选项，例如下拉框的样式、查询接口等
- 支持使用外部数据源，包括 js 对象/数组、url 等
安装
最简单的方法就是使用 npm 安装：
npm install vue-autosuggest2
安装完毕后就可以直接在 Vue 组件中使用了。
使用
组件引入
首先我们需要引入 vue-autosuggest2 组件，可以通过 import 语句来引入：
import Autosuggest2 from 'vue-autosuggest2'
可以选择性地引入样式文件：
import 'vue-autosuggest2/dist/style.css'
组件配置
在 Vue 组件中，我们需要配置一些参数来启用 vue-autosuggest2。例如：
-- -------------------- ---- -------
----------
------------- ---------------------- -------------- ---------------- ------------------ --
-----------
--------
------ ------------ ---- ------------------
------ ------- -
----------- - ------------ --
---- -- -
------ -
-------- -
- ------ ------ ------ ----- --
- ------ -------- ------ ------- --
- ------ ------- ------ ------ -
--
------ --
-
--
-------- -
------- ------- -
------------------
--
-------- ------- -
------------------
-
-
-
---------上面是一个最简单的 vue-autosuggest2 使用例子，我们只需要传递一个 options 数组和 value 值就可以自动完成提示了。可以通过 @input 和 @select 监听输入和选中事件。
深入理解
vue-autosuggest2 是一个非常优秀的自动提示库，我们可以通过深入掌握它的使用方式，为自己开发更好的自动提示相关功能打下基础。
Props
vue-autosuggest2 支持多个参数设置：
suggestions：自动提示的数据列表，其中每个对象需要包含label和value两个属性value：当前输入框的值placeholder：输入框的占位符disabled：是否禁用输入框loading：是否正在加载数据no-results-text：没有数据时的提示文本max-suggestions：最多显示的自动提示数量，默认为 10min-length：输入框值的最小长度，低于该值则不触发自动提示，默认为 1intercept-enter：在回车键（Enter）优先触发的事件，取值为confirm或select-first，默认为confirmintercept-down-arrow：在按下向下箭头时优先触发的事件，取值为select-first或none，默认为select-firstintercept-up-arrow：在按下向上箭头时优先触发的事件，取值为select-last或none，默认为select-lastsuggestion-template：自定义提示项的展示方式
事件
vue-autosuggest2 支持多个事件：
select：选中某一项时触发，会传递一个对象参数，包含label和value属性input：输入框内容发生变化时触发，会传递当前输入框值focus：输入框获得焦点时触发blur：输入框失去焦点时触发search：当需要进行自动提示时触发，会传递一个字符串参数
插槽
vue-autosuggest2 支持多个插槽：
suggestion：自定义提示项的展示方式no-results：没有数据时的展示方式
自定义样式
vue-autosuggest2 提供了多个 CSS 类名来方便我们自定义样式。
.as2-container：整个组件的容器.as2-input：输入框.as2-suggestions：提示列表容器.as2-suggestion：提示项的容器.as2-selected：选中的提示项
以上类名可以通过添加样式文件或在组件中的 style 中自定义样式。
示例代码
以下是一个稍微复杂点的 vue-autosuggest2 使用示例，用了官网提供的一个小知识库 API 来完成自动提示。
-- -------------------- ---- -------
----------
-----
-----------------------
-------------
----------------------
----------------
------------------------
------------------
------------------
------------------
---------------
-
--------- -------------------- ---------- ---
------- ---------------- --------
---- ------------------------------ ----------------------------------
-----------
--------- ------------------
---------------------
-----------
---------------
------
-----------
--------
------ ------------ ---- ------------------
------ ------- -
----------- - ------------ --
---- -- -
------ -
------- ---
-------- ---
-------- -----
-
--
-------- -
-------- ------------ -
--------------------------- ---------
--
-------- ------- -
------------ - ----
----------------------------------------------------------
--------- -- -----------
---------- -- -
------------ - ------------
------------ - -----
--
--------- -- -
------------ - --
------------ - -----
--
-
-
-
---------
-------
----------------------- -
------ -----
-
------------- -
----------------- -----
-
--------以上代码实现了一个搜索关键字自动提示知识库的功能，其中用到了自定义提示项样式和自定义 no-results，可以作为大家学习 vue-autosuggest2 的一个参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005725781e8991b448e86ff