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 当选中时,组件会触发该事件,用户可以监听