主要的参数
jQuery UI Autocomplete常用的参数有:
- Source:用于指定数据来源,类型为String、Array、Function
- String:用于ajax请求的服务器端地址,返回Array/JSON格式
- Array:即字符串数组 或 JSON数组
- Function(request, response):通过request.term获得输入的值,response([Array])来呈现数据;(JSONP是这种方式)
- minLength:当输入框内字符串长度达到minLength时,激活Autocomplete
- autoFocus:当Autocomplete选择菜单弹出时,自动选中第一个
- delay:即延迟多少毫秒激活Autocomplete
其他不常用的就不罗列了。
使用方法
假如页面上有以下输入框:
<input type="text" id="autocomp" />
AJAX请求
通过指定source为服务器端的地址来实现,如下:
1
2
3
4
|
$( "#autocomp" ).autocomplete({
source: "remote.ashx" ,
minLength: 2
});
|
然后在服务器端接收,并输出相应结果,注意默认传递的参数名称为term:
public void ProcessRequest(HttpContext context)
{
// 查询的参数名称默认为term
string query = context.Request.QueryString["term"];
context.Response.ContentType = "text/javascript";
//输出字符串数组 或者 JSON 数组
context.Response.Write("[{\"label\":\"博客园\",\"value\":\"cnblogs\"},{\"label\":\"囧月\",\"value\":\"囧月\"}]");
}
本地Array/JSON数组
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
var availableTags = [
"C#" ,
"C++" ,
"Java" ,
"JavaScript" ,
"ASP" ,
"ASP.NET" ,
"JSP" ,
"PHP" ,
"Python" ,
"Ruby"
];
$( "#local1" ).autocomplete({
source: availableTags
});
var availableTagsJSON = [
{ label: "C# Language" , value: "C#" },
{ label: "C++ Language" , value: "C++" },
{ label: "Java Language" , value: "Java" },
{ label: "JavaScript Language" , value: "JavaScript" },
{ label: "ASP.NET" , value: "ASP.NET" },
{ label: "JSP" , value: "JSP" },
{ label: "PHP" , value: "PHP" },
{ label: "Python" , value: "Python" },
{ label: "Ruby" , value: "Ruby" }
];
$( "#local2" ).autocomplete({
source: availableTagsJSON
});
|
Callback Function方式
通过指定source为自定义函数来实现自定义数据的获取,函数主要有2个参数(request,response),分别用于获取输入的值、呈现结果
本地Array方式获取数据(模仿新浪微博的登录)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
var hosts = [ "gmail.com" , "live.com" , "hotmail.com" , "yahoo.com" , "cnblogs.com" , "火星.com" , "囧月.com" ];
$( "#email1" ).autocomplete({
autoFocus: true ,
source: function (request, response) {
var term = request.term,
ix = term.indexOf( "@" ),
name = term,
host = "" ,
result = [];
result.push(term);
if (ix > -1) {
name = term.slice(0, ix);
host = term.slice(ix + 1);
}
if (name) {
var findedHosts = (host ? $.grep(hosts, function (value) {
return value.indexOf(host) > -1;
}) : hosts),
findedResults = $.map(findedHosts, function (value) {
return name + "@" + value;
});
result = result.concat($.makeArray(findedResults));
}
response(result);
}
});
|
JSONP方式获取数据
直接从官方DEMO拿来的,通过发送ajax请求到远程服务器,然后对返回结果进行处理,最后通过response来呈现:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
$( "#jsonp" ).autocomplete({
source: function (request, response) {
$.ajax({
dataType: "jsonp" ,
data: {
featureClass: "P" ,
style: "full" ,
maxRows: 12,
name_startsWith: request.term
},
success: function (data) {
response($.map(data.geonames, function (item) {
return {
label: item.name + (item.adminName1 ? ", " + item.adminName1 : "" ) + ", " + item.countryName,
value: item.name
}
}));
}
});
},
minLength: 2
});
|
主要的事件
jQuery UI Autocomplete有一些事件,可用于在一些阶段进行额外的控制:
- create(event, ui):Autocomplete创建时,可以在此事件中,对外观进行一些控制
- search(event, ui): 在开始请求之前,可以在此事件中返回false来取消请求
- open(event, ui):Autocomplete的结果列表弹出时
- focus(event, ui):Autocomplete的结果列表任意一项获得焦点时,ui.item为获得焦点的项
- select(event, ui):Autocomplete的结果列表任意一项选中时,ui.item为选中的项
- close(event, ui):Autocomplete的结果列表关闭时
- change(event, ui):当值改变时,ui.item为选中的项
这些事件的ui参数的item属性(如果有的话)默认有label和value属性,不管在source中设置的数据是Array还是JSON数组,如下3种:
1
2
3
|
[ "cnblogs" , "博客园" , "囧月" ]
[{label: "博客园" , value: "cnblogs" }, {label: "囧月" , value: "囧月" }]
[{label: "博客园" , value: "cnblogs" , id: "1" }, {label: "囧月" , value: "囧月" , id: "2" }]
|
假如是第三种的话,还可以得到ui.item.id的值。
这些事件可以通过2种方式来绑定,如下:
1
2
3
4
5
6
7
8
9
10
11
12
|
$( "#autocomp" ).autocomplete({
source: availableTags
, select: function (e, ui) {
alert(ui.item.value)
}
});
$( "#autocomp" ).bind( "autocompleteselect" , function (e, ui) {
alert(ui.item.value);
});
|
通过bind来绑定的方式使用的事件名称为"autocomplete"+事件名称,如"select"就是"autocompleteselect"。
多个值的Autocomplete
一般情况下,输入框的autocomplete仅需要一个值就可以(如:javascript);假如需要多个值(如:javascript,c#,asp.net),则需要绑定一些事件来进行额外处理:
- 在focus事件中返回false,避免输入框的值被autocomplete的单个值取代
- 在select事件中组合多个值
- 在元素的keydown事件做一些处理,理由同1
- 使用callback function方式的source,来获取最后输入的值,并呈现结果
还是直接拿官方DEMO的代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
function keyDown(event) {
if (event.keyCode === $.ui.keyCode.TAB &&
$( this ).data( "autocomplete" ).menu.active) {
event.preventDefault();
}
}
var options = {
focus: function () {
return false ;
},
select: function (event, ui) {
var terms = split( this .value);
terms.pop();
terms.push(ui.item.value);
terms.push( "" );
this .value = terms.join( ", " );
return false ;
}
};
$( "#local3" ).bind( "keydown" , keyDown)
.autocomplete($.extend(options, {
minLength: 2,
source: function (request, response) {
response($.ui.autocomplete.filter(
availableTags, extractLast(request.term)));
}
}));
$( "#ajax3" ).bind( "keydown" , keyDown)
.autocomplete($.extend(options, {
minLength: 2,
source: function (request, response) {
$.getJSON( "remoteJSON.ashx" , {
term: extractLast(request.term)
}, response);
}
}));
|
分享到:
相关推荐
jQuery UI Autocomplete是jQuery UI的自动完成组件演示代码
支持的数据源 jQuery UI Autocomplete主要支持字符串Array、JSON两种数据格式。 普通的Array格式没有什么特殊的,如下: 代码如下: [“cnblogs”,”博客园”,”囧月”] 对于JSON格式的Array,则要求有:label、value...
jquery.autocomplete.js 、jquery.autocomplete.css
jQuery UI Autocomplete 1.8.16 中文输入修正代码,使用jQuery UI Autocomplete的朋友可以参考下
jquery ui autocomplete实现自动填充
介绍 在 jQuery UI 的最近更新中增加了自动... jQuery UI 的下载地址:http://jqueryui.com/download 一.基本配置 一般来说,引用独立的脚本可以减小页面的尺寸,我们这里使用独立的脚本。对于 autocomplete 来说,涉及
做界面效果非常好的jquery工具,在jquery上下载的源码,直接能用
NULL 博文链接:https://zyssnh.iteye.com/blog/2029229
javascript 实现Autocomplete 源代码。可以嵌入任何大多数ASP.net,java的系统中。携程网效果。但是Microsoft Dynamics CRM 4.0例外。 Microsoft Dynamics CRM 4.0用的以后推出。
JQuery UI之Autocomplete使用详解
jquery autocomplete官方版(源代码+示例) 自动补充功能非常实用
NULL 博文链接:https://shihuan830619.iteye.com/blog/1629637
jquery.validate.js jquery.metadata.js jquery.autocomplete.js的打包合集,这些jquery的扩展包非常好用,希望对需要的童鞋有用
NULL 博文链接:https://tanchang7.iteye.com/blog/2338188
1.该js支持jquery的自动补全功能 2.因为jquery-ui是jquery的插件,所以部分版本jquery可能不支持该插件,建议换成内附的jquery.js 3.如有疑惑,请阅读内附的说明文档
在java和net下实现Autocomplete的前台JS和后台controller代码
主要是一些界面的扩展,包括Accordion,AutoComplete,ColorPicker,Dialog,Slider,Tabs,DatePicker,Magnifier,ProgressBar,Spinner等,新版本的UI将包含更多的微件。 效果库 用于提供丰富的动画效果,让动画不再...
在输入页面利用JQuery获取用户输入,然后通过AJAX异步发送到处理页面,...若是jquery autoComplete组件则只要将从后台获取的数据放入autocomplete( url or data, [options] )第一个参数中就行,第二个参数可加可不加。
jquery autocomplete 支持自动补全,可以做成类似百度搜索那样的