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

最新推荐文章于 2024-09-11 15:33:18 发布

Super.D

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量220

点赞数

分类专栏：前端文章标签： jquery javascript ecmascript

本文链接：https://blog.csdn.net/qq_16843563/article/details/128122622

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

该博客介绍了如何使用 autocomplete 插件配置各种属性，如最小字符数、宽度、高度等，来实现输入框的自动补全功能。通过示例代码展示了如何连接后端接口，处理返回的数据并自定义显示格式，同时提供了缓存、延迟加载等功能的配置方法。

摘要由CSDN通过智能技术生成

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);//回显
});