自动补全插件,有些功能有限,有些是老外做的,不支持中文。今天发现一个国人做的,叫做bigautocomplete,还不错。
官网下载地址:http://code.google.com/p/jquery-bigui/downloads/list
如果不想翻墙的话,可以从这里下载(已经转码为UTF-8):http://download.csdn.net/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的博客)
版权声明:本文为原创文章,转载请注明转自Clement-Xu的csdn博客。
时间: 2024-08-05 23:18:29