autocomplete插件

1、主要参数如下：

minChars: 至少需要输入的字符数，默认为1，如果设为0，在输入框内双击或者删除输入框内内容时显示列表。
max: 下拉显示项目的个数，默认为10
matchContains: 决定比较时是否要在字符串内部查看匹配。默认为false
width: 指定下拉框的宽度

delay: 激活autoComplete的延迟时间(单位毫秒)，默认远程为400 本地10
autoFill: 用户选择时自动将用户当前鼠标所在的值填入到input框，默认为false
mustMatch: 如果设置为true，autoComplete只会允许匹配的结果出现在输入框，默认为falseselectFirst: 是否自动选择一个项，默认为true
cacheLength: 对从数据库中取到的结果集要缓存多少条记录.设成1为不缓存。默认为10
matchSubset: 可不可以使用对服务器查询的缓存。只会在缓存长度大于1时有效。默认为true
matchCase: 比较是否开启大小写敏感开关。默认为false
multiple: 是否允许输入多个值。默认为false
multipleSeparator: 多个值的分隔符。默认为逗号
scroll: 当结果集大于默认高度时是否使用卷轴显示。默认为true
scrollHeight: 卷轴高度用像素大小表示。默认为180

 

2、静态数据的范例代码

jQuery(document).ready(function(){
	var data = [{uid:'语文', pwd:'yuwen'}, {uid:'英语', pwd:'yingyu'}, {uid:'数学', pwd:'shuxue'}];
	
	jQuery("#city").autocomplete(data, {
		minChars: 0,
		max: 10,
		width: 200,
		matchContains: true,
		formatItem: function(row, i, max){//格式化列表中的条目
			return row.uid + "_" + row.pwd;
		},
		formatMatch: function(row, i, max){//匹配的值
			return row.uid + " " + row.pwd;
		},
		formatResult: function(row){//选择后文本框显示的值
			return row.uid+"dd";
		}
	}).result(function(event, row, formatted){
		alert(formatted); //选择后触发的事件
	});
});

function _click(){
	alert(jQuery("#city").val());
}

 

<input type="text" id="city"><input type="button" value="click" onclick="_click();">

 

3、动态数据的范例代码

jQuery(document).ready(function(){
	jQuery("#city").autocomplete("autoData", { //使用远程地址获取数据
		minChars: 0,
		max: 10,
		width: 200,
		matchContains: true,
		extraParams: { //city是url的传递参数
			city: function(){
				return jQuery("#city").val();
			}
		},
		formatItem: function(row, i, max){//格式化列表中的条目
			row = eval("("+row+")");
			return row.uid + "_" + row.pwd;
		},
		formatMatch: function(row, i, max){//匹配的值
			row = eval("("+row+")");
			return row.uid + " " + row.pwd;
		},
		formatResult: function(row){//选择后文本框显示的值
			row = eval("("+row+")");
			return row.uid;
		}
	}).result(function(event, row, formatted){
		row = eval("("+row+")");
		alert(row.uid);
	});
});

function _click(){
	alert(jQuery("#city").val());
}

 

返回数据的Servlet源代码：

//使用远程地址时默认传入的参数是：q（输入值），limit（返回结果的最大值）
System.out.println("q: " + request.getParameter("q"));
System.out.println("limit: " + request.getParameter("limit"));

//可以使用extraParams传入其他的参数
System.out.println("city: " + request.getParameter("city"));

//远程数据源是需要固定格式的数据
//返回结果：使用“\n”分割每行数据
PrintWriter out = response.getWriter();
out.print("{uid:'语文', pwd:'yw'}\n");
out.print("{uid:'英语', pwd:'yy'}\n");
out.print("{uid:'数学', pwd:'sx'}\n");

 

解决中文参数传输问题的方法：打开jquery.autocomplete.js文件，找到q: lastWord(term)，修改为q: encodeURI(lastWord(term))即可。后端通过以下代码处理即可取得中文参数值：

URLDecoder.decode(request.getParameter("q"), "UTF-8")