Home > Developer > JavaScript
If an input box can accept multiple input items, for example, select your preferred language and separate them with commas (,), you can also use AutoComplete to provide input prompts for each input item. However, in addition to setting the data source, you also need to add some event processing.
1 <! Doctype html>
2
3
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 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
71 // comma-and-space at the end
72 terms. push ("");
73 this. value = terms. join (",");
74 return false;
75}
76 });
77 });
78 </script>
79
80 <body>
81 <div class = "ui-widget">
82 <label for = "tags"> Tag programming ages: </label>
83 <input id = "tags" size = "50"/>
84 </div>
85 </body>
86
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
