Mercurial > hg > ismi-richfaces
comparison src/main/webapp/imageServer/resources/js/jquery-ui-1.10.4/demos/autocomplete/multiple.html @ 7:764f47286679
(none)
author | jurzua |
---|---|
date | Wed, 29 Oct 2014 14:28:34 +0000 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
6:ded3bccf2cf9 | 7:764f47286679 |
---|---|
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.10.2.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.menu.js"></script> | |
12 <script src="../../ui/jquery.ui.autocomplete.js"></script> | |
13 <link rel="stylesheet" href="../demos.css"> | |
14 <script> | |
15 $(function() { | |
16 var availableTags = [ | |
17 "ActionScript", | |
18 "AppleScript", | |
19 "Asp", | |
20 "BASIC", | |
21 "C", | |
22 "C++", | |
23 "Clojure", | |
24 "COBOL", | |
25 "ColdFusion", | |
26 "Erlang", | |
27 "Fortran", | |
28 "Groovy", | |
29 "Haskell", | |
30 "Java", | |
31 "JavaScript", | |
32 "Lisp", | |
33 "Perl", | |
34 "PHP", | |
35 "Python", | |
36 "Ruby", | |
37 "Scala", | |
38 "Scheme" | |
39 ]; | |
40 function split( val ) { | |
41 return val.split( /,\s*/ ); | |
42 } | |
43 function extractLast( term ) { | |
44 return split( term ).pop(); | |
45 } | |
46 | |
47 $( "#tags" ) | |
48 // don't navigate away from the field on tab when selecting an item | |
49 .bind( "keydown", function( event ) { | |
50 if ( event.keyCode === $.ui.keyCode.TAB && | |
51 $( this ).data( "ui-autocomplete" ).menu.active ) { | |
52 event.preventDefault(); | |
53 } | |
54 }) | |
55 .autocomplete({ | |
56 minLength: 0, | |
57 source: function( request, response ) { | |
58 // delegate back to autocomplete, but extract the last term | |
59 response( $.ui.autocomplete.filter( | |
60 availableTags, extractLast( request.term ) ) ); | |
61 }, | |
62 focus: function() { | |
63 // prevent value inserted on focus | |
64 return false; | |
65 }, | |
66 select: function( event, ui ) { | |
67 var terms = split( this.value ); | |
68 // remove the current input | |
69 terms.pop(); | |
70 // add the selected item | |
71 terms.push( ui.item.value ); | |
72 // add placeholder to get the comma-and-space at the end | |
73 terms.push( "" ); | |
74 this.value = terms.join( ", " ); | |
75 return false; | |
76 } | |
77 }); | |
78 }); | |
79 </script> | |
80 </head> | |
81 <body> | |
82 | |
83 <div class="ui-widget"> | |
84 <label for="tags">Tag programming languages: </label> | |
85 <input id="tags" size="50"> | |
86 </div> | |
87 | |
88 <div class="demo-description"> | |
89 <p>Usage: Type something, eg. "j" to see suggestions for tagging with programming languages. Select a value, then continue typing to add more.</p> | |
90 <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> | |
91 </div> | |
92 </body> | |
93 </html> |