自动补全控件 - smallp/front-suit GitHub Wiki
此控件用于数据量过大,无法用select标签时的解决方案。此控件使用方法是bootstrap形式的,通过类和data-属性进行设置。
引入autoComplete.css
和autoComplete.min.js
后,添加需要的input
标签和存放待选数据的ul
如下:
<div>
<input type="text" class="form-control autoComplete" data-url="" data-id="0" />
<ul class="completeList"></ul>
</div>
input
标签设置类为autoComplete
,ul
标签设置类为completeList
即可。接口url放在input标签中,data-url内,这样可以实现多接口功能。
要求:api返回的数据结构为json 数组,每个元素都有id
和显示出来的name
。
init
:function()。初始化控件。
data-id
:位于input
标签,存储用户选定的id
值,为0代表未选择。
data-url
:位于input
标签,接口路径。
data-group
:如果有多个需要自动补全的,依靠此标签来绑定input
和对应的ul
。data-group
一致时代表为同一组。