自动补全插件,有些功能有限,有些是老外做的,不支持中文。今天发现一个国人做的,叫做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、测试效果,搜索结果出现在下拉菜单中(输入中文也支持):