autocomplete : 自动补全
介绍
能根据同步或异步过滤进行输入的自动补全
使用方法
define(['fui/autocomplete/1.0'], function(Autocomplete){
var data = [
{value:"shanghai",label:"上海",alias:['sh','shh','上海']},
{value:"xian",label:"西安",alias:['xa','西安']},
{value:"chengdu",label:"成都",alias:['cd','chd','成都']},
{value:"shenzhen",label:"深圳",alias:['sz','shzh','szh','深圳']},
{value:"beijing",label:"北京",alias:['bj','北京']},
{value:"hangzhou",label:"杭州",alias:['hz','杭州']}
];
var autocomplete = new Autocomplete({
target:"#test1",
dataSource:data
});
});
配置参数
配置参数 |
参数类型/可选值 |
参数默认值 |
作用说明 |
target |
string |
"" |
需要自动补全功能的目标元素的jQuery选择器 |
dLeft |
number |
0 |
下拉框的位置向左微调的像素数,负值代表向右微调 |
dTop |
number |
0 |
下拉框的位置向上微调的像素数,负值代表向下微调 |
minLength |
number |
1 |
target中字符数的最短长度,当达到minLength时触发采集数据的逻辑 |
filter |
function |
null |
当设置filter时,将对数据集进行过滤 |
dataSource |
array||function |
/ |
数据源,当异步取数据源时,需要通过触发tigger('dataReady',data)事件来填充数据 |
renderList |
function |
显示每一项的label值 |
自定义下拉框内容 |
itemClass |
string |
"fui-autocomplete-item" |
下拉框中每一项的默认class |
classPrefix |
string |
'fui-autocomplete' |
class前缀 |
公共方法
方法名称 |
入参说明 |
返回值 |
作用说明 |
resetPosition() |
/ |
组件实例本身 |
重新定位下拉框的位置 |
hide() |
/ |
/ |
隐藏下拉选项 |
事件
事件名称 |
事件说明 |
dataReady |
组件使用者需要触发的事件,使用场景:当异步取到数据时,需要触发此事件来让组件渲染下拉框内容,参数:dataList |
select |
当选中时,组件会触发该事件,用户可以监听 |