jquery autocomplete自动完成插件API及问题记录

谷梁襦宗
2023-12-01

API属性如下:

 minChars: 0,           //表示在自动完成激活之前填入的最小字符,这里我们设置为0,在我们双击文本框,不输入字符的时候,就会把数据显示出来 
 width: 220,           //下拉框的宽度,default:input元素的宽度
 max: 10,            //下拉项目的个数,default:10
 scrollHeight: 300,       // 下拉框的高度, Default: 180
 scroll: true,            //当结果集大于默认高度时,是否使用滚动条,Default: true
 multiple: false,         //是否允许输入多个值. Default: false
 autoFill: false,          // 是否自动填充. Default: false
 multipleSeparator: " ",      //输入多个字符时,用来分开各个的字符. Default: ","
 matchCase:false,         //是否开启大小写敏感
 selectFirst:true,           // 如果设置成true,下拉列表的第一个值将被自动选择, Default: true
 matchSubset:true,          //是否启用缓存
 cacheLength: 10,             //缓存的长度.即缓存多少条记录.设成1为不缓存.Default: 10
 delay: 20,             //击键后的延迟时间(单位毫秒).Default: 远程为400 本地10
 mustMatch:false,              //如果设置为true,只会允许匹配的结果出现在输入框,当用户输入的是非法字符时,将被清除, Default: false
 matchContains:true,       //决定比较时是否要在字符串内部查看匹配.Default: false

示例代码:

$("#绑定的元素ID").flushCache();
$("#绑定的元素ID").autocomplete(encodeURI(encodeURI('后端接口')), {
	scroll : false,
	matchContains : true,
	width : 260,
	minChars : 0,
	extraParams : {
		//参数规范需要这样写,不会出现奇奇怪怪的问题
		"keyWord":function() {return $("#trimAccountUserName").val();}
	},
	dataType : "json",
	mustMatch : false,
	parse : function(data) {
		data = data.datalist;

		return $.map(data, function(row) {
			return {
				data : row,
				value : row.userName,
				result : row.realName
			};
		});
	},
	formatItem : function(item) {
		return item.realName;
	},
	formatResult : function(row) {
		return row.realName;
	}
}).result(function(e, data, value, sec) {
	$("#绑定的元素ID").val(data.realName);//回显
});
 类似资料: