Autocomplete自动补全组件-HeyUI组件库

做为一个有“只能用本身写的库类”的毛病的人，其实都是有着许多别人所不知道的血泪史的。

AutoComplete做为一个常常性的需求，而后还具有一大堆很复杂的交互，想一想大概只能找一个成熟的开源库吧。
而后，找到了一个api貌似老长老长的开源库，不错哟，用起来。
而后，被产品无尽的需求折磨着，都是泪水。
而后，开始改源码，改着改着想骂人，触发的事件混杂的不认识它妈妈是谁，但是仍是要硬着头皮改完。
其实不少东西，尽管api老长老长，实现的机制也能够很感人。

好吧，血泪史都已经说完了，开始要介绍我本身写的Autocomplete组件了，做为一个自强不息的人，是不会被产品的思惟所战胜的，对于本身的做品，拍着胸脯保证品质，绝对不坑。

HEYUI组件库

www.heyui.top/

AutoComplete组件

API文档地址

Api你们能够经过上面的连接查看。
本篇文章主要是讲述一些应用示例。

示例

百度搜索

百度搜索的示例主要是用来讲明一些用于搜索的自动补全组件。

调用代码：

<AutoComplete :mustMatch="false" config="baidu" v-model="keyword" type="title" @change="trigger"/>
复制代码

示例：admin.heyui.top/autocomplet…
源码：源码地址
配置：autocomplete配置地址
说明：使用config='baidu'能够在其余模块中快速调用该模糊匹配组件，具体能够查看API。

场景应用

场景应用的示例主要是用来讲明一些日常使用的自动补全功能。

调用代码：

<AutoComplete config="simple" v-model="value"/>
复制代码

示例：admin.heyui.top/autocomplet…
源码：源码地址
配置：autocomplete配置地址
说明：使用config='simple'能够在其余模块中快速调用该模糊匹配组件，具体能够查看API。

复杂场景

场景应用的示例主要是用来讲明一些用于数据关联的数据引用。
说明：先选择了公司，再选择该公司拥有的人员。

示例：admin.heyui.top/autocomplet…
源码：源码地址
配置：autocomplete配置地址
说明：使用config='company' config='account'能够在其余模块中快速调用该模糊匹配组件，具体能够查看API。

关于HeyUI组件库

后期，咱们会出愈来愈多的heyui组件库的一些说明教程给你们，但愿你们多提提建议。

相关文章： 前端架构之路：数据驱动型组件-HeyUI，一个新型的VUE组件库

背景图：2016摄于乌兰巴托