jQuery 入门教程(24): jQuery UI Autocomplete示例（二）
如果一个输入框可以接受多个输入项，比如选择你喜欢的语言，以逗号隔开，这是也可以使用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 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 tab45 //when selecting an item46 .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 term57 response($.ui.autocomplete.filter(58 availableTags, extractLast(request.term)));59 },60 focus: function () {61 // prevent value inserted on focus62 return false;63 },64 select: function (event, ui) {65 var terms = split(this.value);66 // remove the current input67 terms.pop();68 // add the selected item69 terms.push(ui.item.value);70 // add placeholder to get the71 //comma-and-space at the end72 terms.push("");73 this.value = terms.join(", ");74 return false;75 }76 });77 });78 </script>79</head>80<body>81 <div class="ui-widget">82 <label for="tags">Tag programming languages: </label>83 <input id="tags" size="50" />84 </div>85</body>86</html>