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

 

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

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

 

使用步骤：

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

 

2、在项目页面中引用：

 

[html] view plain copy
 
  1. <script src="./resources/bigui/jquery.bigautocomplete.js" charset="UTF-8" type="text/javascript"></script>  
  2. <link rel="stylesheet" href="./resources/bigui/jquery.bigautocomplete.css" type="text/css" />  

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

 

 

[html] view plain copy
 
  1. <tr>  
  2.     <th>用例搜索</th>  
  3.     <td><input type="text" id="tcSearch"  size="80" />  
  4.         <input type="button" value="清空" onClick="$('#tcSearch').val('');">  
  5.     </td>  
  6. </tr>   

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

 

 

[html] view plain copy
 
  1. var testCases = [  
  2.     {   title : "0.1 用Map接收前端提交的Form Data或Query String",  
  3.         url : "/mapParameter/map",  
  4.         requestBody : "authCode=123456&accountName=15888888888&password=888962&password=666566"  
  5.     },  
  6.     {   title : "0.2 用MultiValueMap接收前端提交的Form Data或Query String",  
  7.         url : "/mapParameter/multiValueMap",  
  8.         requestBody : "authCode=123456&phone=15888888888&verifyType=0&verifyType=1"  
  9.     },  
  10.     {   title : "0.3 用Map接收前端提交的json格式的Request Payload",  
  11.         url : "/mapParameter/jsonParams",  
  12.         requestBody : '{"authCode":"123456","phone":"15888888888","code":0,"code":1}',  
  13.         contentType : "application/json;charset=utf-8"  
  14.     },  
  15.     {   title : "1.1 测试Guava缓存AreaIdToArea",  
  16.         url : "/cache/test/getArea",  
  17.         requestBody : "areaId=4401"  
  18.     }  
  19. ];  

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

 

 

[html] view plain copy
 
  1. //系统初始化：  
  2. $(function() {  
  3.     rootPath = getRootPath();  
  4.   
  5.     $("#tcSearch").bigAutocomplete({data : testCases,  
  6.         callback : function(data){  
  7.             $("#url").val(rootPath + data.url);  
  8.             $("#params").val(JSON.stringify( JSON.parse(decodeURI(data.requestBody)), null, "\t"));  
  9.             $("#tcTitle").val(data.title);  
  10.         }  
  11.     });  
  12. });  

注：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、测试效果，搜索结果出现在下拉菜单中（输入中文也支持）：