As a person who has the problem that he can only use his own library class, he has a history of blood and tears that many others do not know.

With AutoComplete as a recurring requirement and a lot of complex interactions, you can probably only find a mature open source library. Then, I found an open source library with a seemingly endless API, good yo, use it. And then, tortured by the endless demand for the product, tears. Then, began to change the source code, changed to think of name-calling, triggering the event mixed do not know who its mother is, but still want to change. In fact, many things, despite the longevity of the API, the implementation mechanism can be very impressive.

Well, the history of blood and tears has been said, and IT is time to introduce the Autocomplete component written by myself. As a self-striving person, I will not be defeated by the thinking of products. As for my own works, I will pat my chest to guarantee the quality, and I will never pit.

HEYUI component library

www.heyui.top/

AutoComplete components

API document address

You can view the Api from the link above. This article focuses on some application examples.

The sample

Baidu search

The baidu search example is mainly used to illustrate some of the autocomplete components for search.

Calling code:

<AutoComplete :mustMatch="false" config="baidu" v-model="keyword" type="title" @change="trigger"/>
Copy the code

Example: the admin. Heyui. Top/autocomplet… Use config=’baidu’ to quickly call this fuzzy matching component in other modules, see the API for details.

Application scenarios

Examples of scenarios are used to illustrate some common auto-complete functions.

Calling code:

<AutoComplete config="simple" v-model="value"/>
Copy the code

Example: the admin. Heyui. Top/autocomplet… Use config=’simple’ to quickly call the fuzzy matching component in other modules. See the API for details.

A complex scenario

Examples of scenarios are mainly used to illustrate data references for data association. Note: select the company first, and then select the company has personnel.

Example: the admin. Heyui. Top/autocomplet… Address description: Use config=’company’ config=’account’ to quickly call this fuzzy matching component in other modules, see the API for details.

About the HeyUI component library

In the future, we will publish more and more tutorials on the Heyui component library, and we hope you can make suggestions.

Related articles: Front-end Architecture Path: Data-driven Components -HeyUI, a new VUE component library

Background: Ulan Bator, 2016