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

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

 

使用步骤：

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

 

2、在项目页面中引用：

 

?

1	<script src=./resources/bigui/jquery.bigautocomplete.js charset=UTF- 8 type=text/javascript></script>

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

 

 

?

1 2 3 4 5 6

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

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

 

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

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函数，注册被搜索的内容和回调函数：

 

 

?

1 2 3 4 5 6 7 8 9 10 11 12

//系统初始化： $(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 ,   ));              $(#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、测试效果，搜索结果出现在下拉菜单中（输入中文也支持）：