jQuery 入门教程(23): jQuery UI Autocomplete示例(一)
来源:互联网 发布:一猪二熊三老虎知乎 编辑:程序博客网 时间:2024/06/07 07:45
AutoComplete 在获取焦点后,随着用户键入的内容,可以在预订的数据源中查找和已输入的内容相匹配的内容列表供用户选择。
这可以用作之前输入过的内容也可以用作自动填充相关内容,比如根据城市名,自动填充邮编等。
你可以使用本地数据源或是远程数据源,本地数据一般使用小数据集合,比如包含50条记录的通讯录,远程数据源一般为保护大量记录的数据库。
基本用法
本例为使用AutoComplete的基本用法,通过本地数据源(数组)定义一组语言列表,用户输入字母后,包含该字母的语言会作为列表显示出来:
1
<!doctype html>
2
<
html
lang
=
"en"
>
3
<
head
>
4
<
meta
charset
=
"utf-8"
/>
5
<
title
>jQuery UI Demos</
title
>
6
<
link
rel
=
"stylesheet"
href
=
"themes/trontastic/jquery-ui.css"
/>
7
<
script
src
=
"scripts/jquery-1.9.1.js"
></
script
>
8
<
script
src
=
"scripts/jquery-ui-1.10.1.custom.js"
></
script
>
9
10
<
script
>
11
$(function () {
12
var availableTags = [
13
"ActionScript",
14
"AppleScript",
15
"Asp",
16
"BASIC",
17
"C",
18
"C++",
19
"Clojure",
20
"COBOL",
21
"ColdFusion",
22
"Erlang",
23
"Fortran",
24
"Groovy",
25
"Haskell",
26
"Java",
27
"JavaScript",
28
"Lisp",
29
"Perl",
30
"PHP",
31
"Python",
32
"Ruby",
33
"Scala",
34
"Scheme"
35
];
36
$("#tags").autocomplete({
37
source: availableTags
38
});
39
});
40
</
script
>
41
</
head
>
42
<
body
>
43
<
div
class
=
"ui-widget"
>
44
<
label
for
=
"tags"
>Tags: </
label
>
45
<
input
id
=
"tags"
/>
46
</
div
>
47
</
body
>
48
</
html
>
语调支持
某些语言支持语调字符,比如Jörn 中的ö,希望在输入o时,也能显示包含ö的内容,AutoComplete支持使用function来定义Source属性:
1
<!doctype html>
2
<
html
lang
=
"en"
>
3
<
head
>
4
<
meta
charset
=
"utf-8"
/>
5
<
title
>jQuery UI Demos</
title
>
6
<
link
rel
=
"stylesheet"
href
=
"themes/trontastic/jquery-ui.css"
/>
7
<
script
src
=
"scripts/jquery-1.9.1.js"
></
script
>
8
<
script
src
=
"scripts/jquery-ui-1.10.1.custom.js"
></
script
>
9
10
<
script
>
11
$(function () {
12
var names = ["Jörn Zaefferer",
13
"Scott González",
14
"John Resig"];
15
16
var accentMap = {
17
"á": "a",
18
"ö": "o"
19
};
20
var normalize = function (term) {
21
var ret = "";
22
for (var i = 0; i <
term.length
; i++) {
23
ret += accentMap[term.charAt(i)]
24
|| term.charAt(i);
25
}
26
return ret;
27
};
28
29
$("#developer").autocomplete({
30
source: function (request, response) {
31
var
matcher
32
=
new
RegExp($.ui.autocomplete
33
.escapeRegex(request.term),"i");
34
response($.grep(names, function (value) {
35
value
= value.label
36
|| value.value
37
|| value;
38
return matcher.test(value)
39
|| matcher.test(normalize(value));
40
}));
41
}
42
});
43
});
44
</script>
45
</
head
>
46
<
body
>
47
<
div
class
=
"ui-widget"
>
48
<
form
>
49
<
label
for
=
"developer"
>Developer: </
label
>
50
<
input
id
=
"developer"
/>
51
</
form
>
52
</
div
>
53
</
body
>
54
</
html
>
分类支持
本例是提供简单扩展AutoComplete 组件实现了一个自定义的custom.catcomplete UI组件以支持AutoComplete的分类支持。自定义组件有兴趣的可以参见jQuery 的Widget Factory。一般无需自定义UI组件,如果需要,可以在网站查找是否有人已经实现你需要的UI组件,实在不行才自定义UI组件,使用Widget Factory自定义组件的方法并不十分直观(这是因为JavaScript使用了面向“原型”的面向对象方法,而非通常的使用类的面向对象方法)。
1
<!doctype html>
2
<
html
lang
=
"en"
>
3
<
head
>
4
<
meta
charset
=
"utf-8"
/>
5
<
title
>jQuery UI Demos</
title
>
6
<
link
rel
=
"stylesheet"
href
=
"themes/trontastic/jquery-ui.css"
/>
7
<
script
src
=
"scripts/jquery-1.9.1.js"
></
script
>
8
<
script
src
=
"scripts/jquery-ui-1.10.1.custom.js"
></
script
>
9
10
<
style
>
11
.ui-autocomplete-category {
12
font-weight: bold;
13
padding: .2em .4em;
14
margin: .8em 0 .2em;
15
line-height: 1.5;
16
}
17
</
style
>
18
<
script
>
19
$.widget("custom.catcomplete", $.ui.autocomplete, {
20
_renderMenu: function (ul, items) {
21
var that = this,
22
currentCategory = "";
23
$.each(items, function (index, item) {
24
if (item.category != currentCategory) {
25
ul.append("<
li
class
=
'ui-autocomplete-category'
>"
26
+ item.category + "</
li
>");
27
currentCategory = item.category;
28
}
29
that._renderItemData(ul, item);
30
});
31
}
32
});
33
</
script
>
34
<
script
>
35
$(function () {
36
var data = [
37
{ label: "anders", category: "" },
38
{ label: "andreas", category: "" },
39
{ label: "antal", category: "" },
40
{ label: "annhhx10", category: "Products" },
41
{ label: "annk K12", category: "Products" },
42
{ label: "annttop C13", category: "Products" },
43
{ label: "anders andersson", category: "People" },
44
{ label: "andreas andersson", category: "People" },
45
{ label: "andreas johnson", category: "People" }
46
];
47
48
$("#search").catcomplete({
49
delay: 0,
50
source: data
51
});
52
});
53
</
script
>
54
</
head
>
55
<
body
>
56
<
label
for
=
"search"
>Search: </
label
>
57
<
input
id
=
"search"
/>
58
</
body
>
59
</
html
>
其中custom.catcomplete为自定义的UI组件,因此$( “#search” ).catcomplete 使用catcomplete ,而非autocomplete。
0 0
- jQuery 入门教程(23): jQuery UI Autocomplete示例(一)
- jQuery 入门教程(23): jQuery UI Autocomplete示例(一)
- jQuery 入门教程(24): jQuery UI Autocomplete示例(二)
- jQuery 入门教程(25): jQuery UI Autocomplete示例(三)
- jQuery 入门教程(24): jQuery UI Autocomplete示例(二)
- jQuery 入门教程(25): jQuery UI Autocomplete示例(三)
- jQuery 入门教程(26): jQuery UI Button示例(一)
- jQuery 入门教程(28): jQuery UI Datepicker 示例(一)
- jQuery 入门教程(33): jQuery UI Dialog 示例(一)
- jQuery 入门教程(38): jQuery UI Slider 示例(一)
- jQuery 入门教程(41): jQuery UI Tab 示例(一)
- jQuery 入门教程(26): jQuery UI Button示例(一)
- jQuery 入门教程(28): jQuery UI Datepicker 示例(一)
- jQuery 入门教程(33): jQuery UI Dialog 示例(一)
- jQuery 入门教程(38): jQuery UI Slider 示例(一)
- jQuery 入门教程(41): jQuery UI Tab 示例(一)
- jquery ui autocomplete使用示例
- jQuery 入门教程(27): jQuery UI Button示例(二)
- 理解矩阵(一)
- 与java有关的东东
- jQuery 入门教程(22): jQuery UI Accordion示例
- UVa:307 Sticks
- linux面试题[答案自己修订了下](网络,文件系统,OS,基础概念)
- jQuery 入门教程(23): jQuery UI Autocomplete示例(一)
- API Design for C++ 一本书值得一看
- 一生就这么一次,谈一场以结婚为目的的恋爱吧
- jQuery 入门教程(24): jQuery UI Autocomplete示例(二)
- jQuery 入门教程(25): jQuery UI Autocomplete示例(三)
- First Week_(1)
- 《iOS应用逆向工程:分析与实战》迷你书
- mysql分表
- jQuery 入门教程(26): jQuery UI Button示例(一)