third-party/jquery-ui-1.10.2/demos/autocomplete/multiple.html

   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.9.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.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>