jQuery 入门教程(23): jQuery UI Autocomplete示例（一）

mapdigit

浏览: 243384 次

最近访客更多访客>>

shang2012

xiaotang5051729

zxc7033638

hjc5345

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (690)

社区版块

存档分类

AutoComplete 在获取焦点后，随着用户键入的内容，可以在预订的数据源中查找和已输入的内容相匹配的内容列表供用户选择。
这可以用作之前输入过的内容也可以用作自动填充相关内容，比如根据城市名，自动填充邮编等。
你可以使用本地数据源或是远程数据源，本地数据一般使用小数据集合，比如包含50条记录的通讯录，远程数据源一般为保护大量记录的数据库。
基本用法
本例为使用AutoComplete的基本用法，通过本地数据源（数组）定义一组语言列表，用户输入字母后，包含该字母的语言会作为列表显示出来：

1
<!doctype html>

2

<htmllang="en">

3

<head>

4

<metacharset="utf-8"/>

5

<title>jQuery UI Demos</title>

6

<linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/>

7

<scriptsrc="scripts/jquery-1.9.1.js"></script>

8

<scriptsrc="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

<divclass="ui-widget">

44

<labelfor="tags">Tags: </label>

45

<inputid="tags"/>

46

</div>

47

</body>

48

</html>

语调支持
某些语言支持语调字符，比如Jörn 中的ö，希望在输入o时，也能显示包含ö的内容，AutoComplete支持使用function来定义Source属性：

1
<!doctype html>

2

<htmllang="en">

3

<head>

4

<metacharset="utf-8"/>

5

<title>jQuery UI Demos</title>

6

<linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/>

7

<scriptsrc="scripts/jquery-1.9.1.js"></script>

8

<scriptsrc="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

varmatcher

32

=newRegExp($.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

<divclass="ui-widget">

48

<form>

49

<labelfor="developer">Developer: </label>

50

<inputid="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

<htmllang="en">

3

<head>

4

<metacharset="utf-8"/>

5

<title>jQuery UI Demos</title>

6

<linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/>

7

<scriptsrc="scripts/jquery-1.9.1.js"></script>

8

<scriptsrc="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("<liclass='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

<labelfor="search">Search: </label>

57

<inputid="search"/>

58

</body>

59

</html>