自动补全控件 - smallp/front-suit GitHub Wiki

自动补全控件

使用说明

此控件用于数据量过大,无法用select标签时的解决方案。此控件使用方法是bootstrap形式的,通过类和data-属性进行设置。

DEMO

引入autoComplete.cssautoComplete.min.js后,添加需要的input标签和存放待选数据的ul如下:

<div>
	<input type="text" class="form-control autoComplete" data-url="" data-id="0" />
	<ul class="completeList"></ul>
</div>

input标签设置类为autoCompleteul标签设置类为completeList即可。接口url放在input标签中,data-url内,这样可以实现多接口功能。 要求:api返回的数据结构为json 数组,每个元素都有id和显示出来的name

参数说明

init:function()。初始化控件。
data-id:位于input标签,存储用户选定的id值,为0代表未选择。
data-url:位于input标签,接口路径。
data-group:如果有多个需要自动补全的,依靠此标签来绑定input和对应的uldata-group一致时代表为同一组。

⚠️ **GitHub.com Fallback** ⚠️