简介
Vue-Instant 是一个基于 Vue.js 的自动完成搜索组件，仅需几行代码即可快速集成到 Vue 项目中。它可以帮助开发者优化前端搜索交互体验，支持异步数据源和自定义渲染。
安装
可以通过 npm 安装 vue-instant：
npm install vue-instant --save
使用
在 Vue 组件中，我们需要先引入 vue-instant：
import Vue from 'vue' import InstantSearch from 'vue-instant'
然后，组件里可以使用 <instant-search> 标签来创建自动完成搜索框，例如：
-- -------------------- ---- -------
----------
---------------
------------------
----------------------
-----------------------------------
--
-----------
--------
------ ------- -
------ -
------ -
------------- ---
-------- -
------- -------- ------ ------
------- --------- ------ ------
------- --------- ------ -----
-
-
--
-------- -
------------------------- -
-- ---------
-
-
-
---------上述代码中，我们定义了一个 options 数组作为搜索建议列表，每个元素包含 value 和 label 两个字段，分别对应搜索建议的值和显示文本。我们还绑定了 v-model 指令到 selectedItem 变量上，这个变量会在用户选中某个搜索建议时自动更新。最后，我们在 handleSearchChange 方法里处理搜索逻辑。
配置项
Vue-Instant 提供了多种配置项，可以通过 options 属性传入：
options: 搜索建议列表。placeholder: 输入框的占位文本。debounce: 输入文本改变时的延迟时间，单位为毫秒，默认为 300。min-length: 触发搜索的最小输入长度，默认为 2。max-results: 最多显示的搜索建议数量，默认为 10。render-option: 自定义搜索建议的渲染方式，可以是一个函数或一个组件。get-suggestions: 异步获取搜索建议的方法。
异步数据源
当搜索建议来自于远程服务器时，我们可以使用 get-suggestions 配置项异步获取搜索建议。例如：
-- -------------------- ---- -------
----------
---------------
---------------------------------
--
-----------
--------
------ ------- -
-------- -
----- --------------------- -
----- -------- - ----- -------------------------------
----- ---- - ----- ---------------
------ ----------------------- -- --
------ ----------
------ -----------
---
-
-
-
---------上述代码中，我们定义了一个名为 getSuggestions 的异步方法，在这个方法里向服务器发送请求，获取搜索建议数据，并将其转换为 value 和 label 对象数组后返回。
自定义渲染
如果你需要自定义搜索建议的显示方式，可以使用 render-option 配置项。例如：
-- -------------------- ---- -------
----------
---------------
------------------
-----------------------------
--
-----------
--------
------ ------- -
------ -
------ -
-------- -
---- -- ------ -------- ------ -------------
---- -- ------ --------- ------ --------------
---- -- ------ --------- ------ -------------
-
-
--
-------- -
-------------------- -
------ -
---- ---------------
---- --------------------- --------------------- --
----------------------------
------
-
-
-
-
---------上述代码中，我们定义了一个名为 renderOption 的
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/37399