Mercurial > hg > MPIWGThesaurus

comparison jquery-ui/development-bundle/demos/autocomplete/multiple.html @ 0:b2e4605f20b2

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
beta version
author dwinter
date Thu, 30 Jun 2011 09:07:49 +0200
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:b2e4605f20b2
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>jQuery UI Autocomplete - Multiple values</title>
6 <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7 <script src="../../jquery-1.5.1.js"></script>
8 <script src="../../ui/jquery.ui.core.js"></script>
9 <script src="../../ui/jquery.ui.widget.js"></script>
10 <script src="../../ui/jquery.ui.position.js"></script>
11 <script src="../../ui/jquery.ui.autocomplete.js"></script>
12 <link rel="stylesheet" href="../demos.css">
13 <script>
14 $(function() {
15 var availableTags = [
16 "ActionScript",
17 "AppleScript",
18 "Asp",
19 "BASIC",
20 "C",
21 "C++",
22 "Clojure",
23 "COBOL",
24 "ColdFusion",
25 "Erlang",
26 "Fortran",
27 "Groovy",
28 "Haskell",
29 "Java",
30 "JavaScript",
31 "Lisp",
32 "Perl",
33 "PHP",
34 "Python",
35 "Ruby",
36 "Scala",
37 "Scheme"
38 ];
39 function split( val ) {
40 return val.split( /,\s*/ );
41 }
42 function extractLast( term ) {
43 return split( term ).pop();
44 }
45
46 $( "#tags" )
47 // don't navigate away from the field on tab when selecting an item
48 .bind( "keydown", function( event ) {
49 if ( event.keyCode === $.ui.keyCode.TAB &&
50 $( this ).data( "autocomplete" ).menu.active ) {
51 event.preventDefault();
52 }
53 })
54 .autocomplete({
55 minLength: 0,
56 source: function( request, response ) {
57 // delegate back to autocomplete, but extract the last term
58 response( $.ui.autocomplete.filter(
59 availableTags, extractLast( request.term ) ) );
60 },
61 focus: function() {
62 // prevent value inserted on focus
63 return false;
64 },
65 select: function( event, ui ) {
66 var terms = split( this.value );
67 // remove the current input
68 terms.pop();
69 // add the selected item
70 terms.push( ui.item.value );
71 // add placeholder to get the 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
82 <div class="demo">
83
84 <div class="ui-widget">
85 <label for="tags">Tag programming languages: </label>
86 <input id="tags" size="50" />
87 </div>
88
89 </div><!-- End demo -->
90
91
92
93 <div class="demo-description">
94 <p>Usage: Type something, eg. "j" to see suggestions for tagging with programming languages. Select a value, then continue typing to add more.</p>
95 <p>This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.</p>
96 </div><!-- End demo-description -->
97
98 </body>
99 </html>