jQuery 入门教程(24): jQuery UI Autocomplete示例（二）

mapdigit

浏览: 241902 次

最近访客更多访客>>

shang2012

xiaotang5051729

zxc7033638

hjc5345

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (690)

社区版块

存档分类

如果一个输入框可以接受多个输入项，比如选择你喜欢的语言，以逗号隔开，这是也可以使用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

function split(val) {

37

return val.split(/,\s*/);

38

}

39

function extractLast(term) {

40

return split(term).pop();

41

}

42

43

$("#tags")

44

// don't navigate away from the field on tab

45

//when selecting an item

46

.bind("keydown", function (event) {

47

if (event.keyCode === $.ui.keyCode.TAB &&

48

$(this).data("ui-autocomplete").menu.active) {

49

event.preventDefault();

50

}

51

})

52

.autocomplete({

53

minLength: 0,

54

source: function (request, response) {

55

// delegate back to autocomplete,

56

// but extract the last term

57

response($.ui.autocomplete.filter(

58

availableTags, extractLast(request.term)));

59

},

60

focus: function () {

61

// prevent value inserted on focus

62

return false;

63

},

64

select: function (event, ui) {

65

var terms = split(this.value);

66

// remove the current input

67

terms.pop();

68

// add the selected item

69

terms.push(ui.item.value);

70

// add placeholder to get the

71

//comma-and-space at the end

72

terms.push("");

73

this.value = terms.join(", ");

74

return false;

75

}

76

});

77

});

78

</script>

79

</head>

80

<body>

81

<divclass="ui-widget">

82

<labelfor="tags">Tag programming languages: </label>

83

<inputid="tags"size="50"/>

84

</div>

85

</body>

86

</html>