Vue 自动补全（Vue-AutoComplete）组件,与表单、富文本、表格、图表、弹窗、拖拽、时间日期选择等组件一样，是大家用 Vue 搭建项目时使用最频繁的组件之一。Vue-AutoComplete 除了基础筛选过滤外，还有非常多样的功能配合不同场景使用，比如 向前向后补全、补全选项中带按钮直接跳转、自动完成补全等。本文记录了我自己使用多年最好用的 5 款 Vue-AutoComplete 自动补全组件，每一款都经过我实际测试，推荐给大家。

如果你正在搭建后台管理工具，又不想处理前端问题，推荐使用卡拉云，卡拉云是新一代低代码开发工具，可一键接入常见数据库及 API ，无需懂前端，仅需拖拽即可快速搭建属于你自己的后台管理工具，一周工作量缩减至一天，详见本文文末。

接下来介绍 5 款我自己常用的 Vue Select 第三方组件，它们各有特色，希望能帮你找到合适你的选择器

• Vue-simple-suggest - 轻量级代码简洁、可在补全条目后面增加按键及事件
• Vue-instant - Vue 即时自动补全，极简无多余功能，未补全而生
• Vue-AutoSuggest - 自动补全，可向前后自动补全
• V-AutoComplete - 无 CSS 适应任何框架
• Vue-BootStrap-Typeahead - bootstrap vue 的极简自动补全插件

1. Vue-simple-suggest - 轻量级代码简洁、可在补全条目后面增加按键及事件

Github：https://github.com/KazanExpress/vue-simple-suggest

Vue-simple-suggest 是一款简洁的 Vue 自动补全、搜索建议组件，虽然代码简洁，但功能却非常强大，样式多样，仿下拉菜单的样式，可在补全列表里增加多个按键，在多个维度上与用户互动。

• 支持 v-model 双向绑定
• 自由切换v-model类型，选择 / 输入
• 支持键盘控制
• 简单丰富的 API
• CSS 类简洁，可快速根据自己所需重新配置
• 灵活可定制，轻量简单

2. Vue-instant - Vue 即时自动补全，极简无多余功能，未补全而生

Github：https://github.com/santiblanko/vue-instant

vue-instant 没有任何多余功能，它专注在自动补全这一个功能点上，UI 设计简洁优美，包含一个「清空」按钮，点击清空当前输入框。整个设计非常适合用在过滤器 / 站内搜索的场景中。

3. Vue-AutoSuggest - 自动补全，可向前后自动补全

Github：https://github.com/darrenjennings/vue-autosuggest

Vue-Autosuggest 代码清晰简洁。向后自动补全多数第三方组件已经做的很好，但前后皆可自动补全，并不多见，Vue-Autosuggest 支持前后自动补全。

• 自定义渲染组件完全控制渲染，轻巧高效。
• 内置 AJAX 获取数据，简单好用。
• 支持向前、向后自动补全。
• 开发者进行了大量测试保证稳定及质量。
• 支持接入免费搜索 SaaS Algolia

4. V-AutoComplete - 无 CSS 适应任何框架

Github：https://github.com/paliari/v-autocomplete

V-Autocomplete 自动补全组件，无任何 CSS ，可随意引入任何框架中使用。支持向前，向后自动补全，查询效率及高，即时相应，键入即现。

5. Vue-BootStrap-Typeahead - bootstrap vue 的极简自动补全插件

Github：https://github.com/alexurquhart/vue-bootstrap-typeahead

Vue-BootStrap-Typeahead 应该算是自动补全插件的最小版了，他实际是 BootStrap 的内置组件 Typeahead 的 Vue 实现。功能及其精简，只有一个基本用法，就是在 Vue 的 data 里以数组的形式索引数据。适用于最基本的自动补全场景。

6. 自动补全组件总结及卡拉云

本文推荐了我自己使用多年的 5 款最好用的 Vue 自动补全组件，这其中一定有一款适合你。这些第三方组件已经帮我们节省大量开发时间，如果还想更进一步，推荐使用卡拉云，卡拉云内置自动补全和过滤搜索功能，无需懂任何前端，仅需拖拽即可快速生成。

下面是用卡拉云搭建的数据库 CURD 后台管理系统，只需拖拽组件，即可在10分钟内完成搭建。查看 3 分钟上手视频。

你也可以把你自己搭建好的后台管理工具分享出去，比如这样：https://my.kalacloud.com/apps/8z9z3yf9fy/published

卡拉云是新一代低代码开发平台，与前端框架 React 等相比，卡拉云的优势在于不用首先搭建开发环境，直接注册即可开始使用。开发者完全不用处理任何前端问题，只需简单拖拽，即可快速生成所需组件，可一键接入包括 MySQL 在内的常见数据库及 API，根据引导简单几步打通前后端，数周的开发时间，缩短至 1 小时。立即免费试用卡拉云。

扩展阅读：