jquery autocomplete 自动完成插件及插件常用属性及项目案例

在项目中使用了autocomplete 来完成自动补全功能，整理一下文档，以便以后使用，中间有理解不到位的地方请各位朋友可以帮忙指出，谢谢！

jquery.autocomplete API

使用的语法： autocomplete(url/data, [options] ) 

参数： url / data：url或者数组          [options]：可选项   

jquery.autocomplete  API

　　语法： autocomplete(url/data, [options] ) 

　　参数： url / data：url或者数组          [options]：可选项   

2、[options]：可选项，选项解释如下：

 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

　　formatItem: function(row, i, max) { }

　　　　//结果中的每一行都会调用这个函数,返回值将用LI元素包含,显示在下拉列表中. 三个参数(row, i, max): 返回的结果数组, 当前处理的行数(从1开始), 当前结果数组元素的个数. Default: none, 表示不指定自定义的处理函数.

　　formatResult : function(row, i, max) { }

　　　　//和formatItem类似,但可以将将要输入到input文本框内的值进行格式化.同样有三个参数,和formatItem一样.Default: none,表示要么是只有数据,要么是使用formatItem提供的值.

　　formatMatch: function(row) { }

　　　　//对每一行数据使用此函数格式化需要查询的数据格式. 返回值是给内部搜索算法使用的. 参数值row

　　result (function(event, data, formatted){}) //此事件会在用户选中某一项后触发，参数为：event: 事件对象, data: 选中的数据行,formatted:formatResult函数返回的值;

　　　　例如： $("#d").result(function(event, data, formatted){alert(formatted);})

　　extraParams (Object):

　　　　//为后台(一般是服务端的脚本)提供更多的参数.和通常的作法一样是使用一个键值对对象.如果传过去的值是{ bar:4 },将会被autocompleter解析成my_autocomplete_backend.php?q=foo&bar=4 (假设当前用户输入了foo). Default: {}

案例：

引用插件：

页面调用：（主要是文本框要有对应的id即可）

JavaScript代码：

//文本框模糊查询
	  $("#supplierName").autocomplete("designated-supplier-goods!likeagreementSupplierName.do", {  //当用户输入关键字的时候 ，通过 url的方式调用action的findStoreProdctListNameForJson方法
			minChars: 1,  //最小显示条数
			max: 12,  //最大显示条数
			cacheLength :0,//cacheLength (Number): 缓存的长度.即对从数据库中取到的结果集要缓存多少条记录.设成0为不缓存.Default: 10 
			autoFill: false ,//自动填
			scrollHeight: 300, //提示的高度，溢出显示滚动条   
			matchContains: true, //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示 
			dataType : "json",  //指定数据类型的渲染方式
			multiple:false,//是否允许输入多个值即多次使用autoComplete以输入多个值. Default: false
			width: 545,　//下拉框的宽度，default：input元素的宽度
			extraParams:{   
				supplierName: function() { 
	               return $("#supplierName").val();    //url的参数传递
	              }   
	           },
			 //进行对返回数据的格式处理
  			 parse: function(data) {
	             var rows = [];
	               for(var i=0; i" + row + "";
         	},
         	formatMatch: function(item) {
         		return item.itemid;
         	},
         	formatResult: function(item) {
         		return item.itemid;
         	} 
		});

后台控制层查询：（获取对应的集合，转换成json数据）

public void likeagreementSupplierName() throws UnsupportedEncodingException {
		String newProductName="";
		if(StringUtils.isNotBlank(supplierName))
//		newProductName = new String(supplierName.getBytes("ISO-8859-1"),"utf-8");  // 解决乱码
		likeList=iDesignatedSupplierGoodsBusiness.getLikSupplierName(supplierName);
		List> list=new ArrayList>();
		for (String str : likeList) {
			Map map=new HashMap();
			map.put("supplierName", str);
			list.add(map);
		}
		StringBuilder sb = new StringBuilder();//用了stringbuffer，效率快，但是线程不安全的  
		if(list.size()>0) {
			sb.append("[");  
			for (Map map : list) {//这里用了增强for遍历  
				for (String key : map.keySet()) {   
					//根据不同需求，拼接数据  
					sb.append("{").append("\"").append(key).append("\":\"").append(map.get(key))  
					.append("\"").append("}").append(",");  
				}  
			}  
			sb.deleteCharAt(sb.lastIndexOf(","));  
			sb.append("]");  
		}
	       
	       GboatAppContext.output(sb.toString());
	}

数据获取查询：

@Override
	public List getLikSupplierName(String newProductName) {
		StringBuffer sql=new StringBuffer();
		sql.append("SELECT S.SUPPLIER_GOODS_NAME FROM GP_T_DESIGNATED_SUPPLIER_GOODS S WHERE S.SUPPLIER_GOODS_NAME LIKE '%"+newProductName+"%'");
		List queryListByHql=(List) this.baseDAO.queryListBySql(sql.toString(), null);
		return queryListByHql;
	}

遇到的常见问题：http://blog.csdn.net/wu920604/article/details/76914444

所需资料下载（js是改过的，兼容火狐支持中文查询）：http://download.csdn.net/detail/wu920604/9925040