autocomplete自动完成插件

乐之者java

于 2020-04-24 23:49:04 发布

阅读量283

点赞数

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

本文链接：https://blog.csdn.net/xiaozhuangyumaotao/article/details/105742477

版权

前端专栏收录该内容

175 篇文章 3 订阅

订阅专栏

效果图：

说明：自动完成是经常用到不假，有的时候我都直接自己写了，但是一再的碰到，原先写的代码又找不到了，想写吧，想到又需要定位又需要各种事件，想要没有bug的完成这个看起来不大的自动完成(autocomplete)功能,没有个把小时还真难说，我还是忍不住找到了插件，效果就如图所示了，需要jquery的支持，而且我使用jquery-1.12.4还不支持，说是"$.brower.opera undefined",后来换成了个低版本的jquery-1.8.1.min.js就好了，是我这里选择的autocomplete的版本比较低吧，可以用就行了，我这里选择的是autocomplete1.1。

说了那么多，上代码啊，静一静，就来：

html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>任务查询</title>
<link href="jquery.autocomplete.css" rel="stylesheet">
	<style>
#instanceName{
	width:150px
}
</style>
</head>
<body>
<form id="J_Form" >
	<label>实例名：</label> 
	<input type="text" name="instanceName" id="instanceName">
</form>	
	<script src="jquery-1.8.1.min.js"></script>
	<script type="text/javascript" src="jquery.autocomplete.js"></script>
</body>
</html>

javascript代码：

<script>
	var data=[];
	for(var i=0;i<100;i++){
		var obj={};
		obj["id"]=i+"";
		obj["instanceIp"]="10.10.10."+i;
		obj["instanceName"]="inst"+i;
		data.push(obj);
	}		  
	$("#instanceName").autocomplete(data, {
		minChars: 0, //表示在自动完成激活之前填入的最小字符
		max: 1000000, //表示列表里的条目数
		autoFill: true, //表示自动填充
		mustMatch: false, //表示必须匹配条目,文本框里输入的内容,必须是data参数里的数据,如果不匹配,文本框就被清空
		matchContains: true, //表示包含匹配,相当于模糊匹配
		scrollHeight: 200, //表示列表显示高度,默认高度为180
		width:150,
		scroll:true,
		formatItem: function (row) {
			return row.instanceName;
		},
		formatMatch: function (row) {
			return row.instanceName;
		},
		formatResult: function (row) {
			return row.instanceName;
		}
	});		
</script>

好的，如此简单的几行就可以完成自动完成的功能了。这个插件的核心函数如下：

$("#instanceName").autocomplete(data,obj);

这个函数autocomplete有两个参数，第一个data是一个数据的格式，里面有多个对象，对象有多个属性，自动完成插件显示的项是什么，可以在配置项的回调函数中返回；第二个参数是一个对象，格式类似“{配置项1:配置项的值1,配置项2:配置项的值2...}”，经常用到的配置项我已经在上边的例子中给出。