非常好用的JQuery自动补全插件bigautocomplete

自动补全插件，有些功能有限，有些是老外做的，不支持中文。今天发现一个国人做的，叫做bigautocomplete，还不错。

官网下载地址：http://code.google.com/p/jquery-bigui/downloads/list

如果不想翻墙的话，可以从这里下载（已经转码为UTF-8）：http://download.youkuaiyun.com/detail/clementad/8917219

使用步骤：

1、把两个js和css文件放到项目中：

2、在项目页面中引用：

<script src="./resources/bigui/jquery.bigautocomplete.js" charset="UTF-8" type="text/javascript"></script>
<link rel="stylesheet" href="./resources/bigui/jquery.bigautocomplete.css" type="text/css" />

3、定义用来搜索的text input，id为tcSearch：

		<tr>
			<th>用例搜索</th>
			<td><input type="text" id="tcSearch"  size="80" />
				<input type="button" value="清空" onClick="$('#tcSearch').val('');">
			</td>
		</tr>	

4、定义被搜索的数组对象（数组中的每一个对象都有包含title属性，控件搜索的就是title中的内容）：

var testCases = [
	{	title : "0.1 用Map接收前端提交的Form Data或Query String",
		url : "/mapParameter/map",
		requestBody : "authCode=123456&accountName=15888888888&password=888962&password=666566"
	},
	{	title : "0.2 用MultiValueMap接收前端提交的Form Data或Query String",
		url : "/mapParameter/multiValueMap",
		requestBody : "authCode=123456&phone=15888888888&verifyType=0&verifyType=1"
	},
	{	title : "0.3 用Map接收前端提交的json格式的Request Payload",
		url : "/mapParameter/jsonParams",
		requestBody : '{"authCode":"123456","phone":"15888888888","code":0,"code":1}',
		contentType : "application/json;charset=utf-8"
	},
	{	title : "1.1 测试Guava缓存AreaIdToArea",
		url : "/cache/test/getArea",
		requestBody : "areaId=4401"
	}
];

5、在初始化函数中调用bigAutocomplete函数，注册被搜索的内容和回调函数：

		//系统初始化：
		$(function() {
			rootPath = getRootPath();
	
			$("#tcSearch").bigAutocomplete({data : testCases,
		    	callback : function(data){
					$("#url").val(rootPath + data.url);
					$("#params").val(JSON.stringify( JSON.parse(decodeURI(data.requestBody)), null, "\t"));
					$("#tcTitle").val(data.title);
				}
			});
		});

注： bigAutocomplete的参数说明：

$("xxxxx").bigAutocomplete({data:[...],url:"",width:0,callback:{}})

参数	说明
data(可选)：	data：格式{data:[{title:null,result:{}},{title:null,result:{}}]} url和data两个参数必须有一个，且只有一个生效，data优先。
url(可选)：	url为字符串，用来ajax后台获取数据，返回的数据格式为data参数一样。
width(可选)：	下拉框的宽度，默认使用输入框宽度。
callback(可选)：	选中行后按回车或单击时回调的函数，用于返回选中行的其他数据及做一些操作。

6、测试效果，搜索结果出现在下拉菜单中（输入中文也支持）：

（原创文章，转载请注明转自Clement-Xu的博客）