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

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8">
   5         <title>jQuery UI Autocomplete - Multiple, remote</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         <style>
  15         .ui-autocomplete-loading {
  16                 background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
  17         }
  18         </style>
  19         <script>
  20         $(function() {
  21                 function split( val ) {
  22                         return val.split( /,\s*/ );
  23                 }
  24                 function extractLast( term ) {
  25                         return split( term ).pop();
  26                 }
  27
  28                 $( "#birds" )
  29                         // don't navigate away from the field on tab when selecting an item
  30                         .bind( "keydown", function( event ) {
  31                                 if ( event.keyCode === $.ui.keyCode.TAB &&
  32                                                 $( this ).data( "ui-autocomplete" ).menu.active ) {
  33                                         event.preventDefault();
  34                                 }
  35                         })
  36                         .autocomplete({
  37                                 source: function( request, response ) {
  38                                         $.getJSON( "search.php", {
  39                                                 term: extractLast( request.term )
  40                                         }, response );
  41                                 },
  42                                 search: function() {
  43                                         // custom minLength
  44                                         var term = extractLast( this.value );
  45                                         if ( term.length < 2 ) {
  46                                                 return false;
  47                                         }
  48                                 },
  49                                 focus: function() {
  50                                         // prevent value inserted on focus
  51                                         return false;
  52                                 },
  53                                 select: function( event, ui ) {
  54                                         var terms = split( this.value );
  55                                         // remove the current input
  56                                         terms.pop();
  57                                         // add the selected item
  58                                         terms.push( ui.item.value );
  59                                         // add placeholder to get the comma-and-space at the end
  60                                         terms.push( "" );
  61                                         this.value = terms.join( ", " );
  62                                         return false;
  63                                 }
  64                         });
  65         });
  66         </script>
  67 </head>
  68 <body>
  69
  70 <div class="ui-widget">
  71         <label for="birds">Birds: </label>
  72         <input id="birds" size="50">
  73 </div>
  74
  75 <div class="demo-description">
  76 <p>Usage: Enter at least two characters to get bird name suggestions. Select a value to continue adding more names.</p>
  77 <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>
  78 </div>
  79 </body>
  80 </html>