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

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

使用步骤：

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

2、在项目页面中引用：

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

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

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

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

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

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

更多相关文章

随机推荐