最好用的 5 款 Vue AutoComplete 自动补全组件

A kitten
蒋川
B 端数据开发,卡拉云联合创始人
最近更新 2022年05月23日

最好用的 5 款 Vue AutoComplete 自动补全组件

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 - 轻量级代码简洁、可在补全条目后面增加按键及事件

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 即时自动补全,极简无多余功能,未补全而生

Vue-instant

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

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

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

Vue-Autosuggest

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

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

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

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

v-autocomplete

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

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

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

vue-bootstrap-typeahead

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

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

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

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

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

卡拉云 SQL admin 后台管理系统

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

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

扩展阅读: