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

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8">
   5         <title>jQuery UI Autocomplete - Combobox</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.button.js"></script>
  11         <script src="../../ui/jquery.ui.position.js"></script>
  12         <script src="../../ui/jquery.ui.menu.js"></script>
  13         <script src="../../ui/jquery.ui.autocomplete.js"></script>
  14         <script src="../../ui/jquery.ui.tooltip.js"></script>
  15         <link rel="stylesheet" href="../demos.css">
  16         <style>
  17         .ui-combobox {
  18                 position: relative;
  19                 display: inline-block;
  20         }
  21         .ui-combobox-toggle {
  22                 position: absolute;
  23                 top: 0;
  24                 bottom: 0;
  25                 margin-left: -1px;
  26                 padding: 0;
  27                 /* support: IE7 */
  28                 *height: 1.7em;
  29                 *top: 0.1em;
  30         }
  31         .ui-combobox-input {
  32                 margin: 0;
  33                 padding: 0.3em;
  34         }
  35         </style>
  36         <script>
  37         (function( $ ) {
  38                 $.widget( "ui.combobox", {
  39                         _create: function() {
  40                                 this.wrapper = $( "<span>" )
  41                                         .addClass( "ui-combobox" )
  42                                         .insertAfter( this.element );
  43
  44                                 this._createAutocomplete();
  45                                 this._createShowAllButton();
  46                         },
  47
  48                         _createAutocomplete: function() {
  49                                 var selected = this.element.children( ":selected" ),
  50                                         value = selected.val() ? selected.text() : "";
  51
  52                                 this.input = $( "<input>" )
  53                                         .appendTo( this.wrapper )
  54                                         .val( value )
  55                                         .attr( "title", "" )
  56                                         .addClass( "ui-state-default ui-combobox-input ui-widget ui-widget-content ui-corner-left" )
  57                                         .autocomplete({
  58                                                 delay: 0,
  59                                                 minLength: 0,
  60                                                 source: $.proxy( this, "_source" )
  61                                         })
  62                                         .tooltip({
  63                                                 tooltipClass: "ui-state-highlight"
  64                                         });
  65
  66                                 this._on( this.input, {
  67                                         autocompleteselect: function( event, ui ) {
  68                                                 ui.item.option.selected = true;
  69                                                 this._trigger( "select", event, {
  70                                                         item: ui.item.option
  71                                                 });
  72                                         },
  73
  74                                         autocompletechange: "_removeIfInvalid"
  75                                 });
  76                         },
  77
  78                         _createShowAllButton: function() {
  79                                 var wasOpen = false;
  80
  81                                 $( "<a>" )
  82                                         .attr( "tabIndex", -1 )
  83                                         .attr( "title", "Show All Items" )
  84                                         .tooltip()
  85                                         .appendTo( this.wrapper )
  86                                         .button({
  87                                                 icons: {
  88                                                         primary: "ui-icon-triangle-1-s"
  89                                                 },
  90                                                 text: false
  91                                         })
  92                                         .removeClass( "ui-corner-all" )
  93                                         .addClass( "ui-corner-right ui-combobox-toggle" )
  94                                         .mousedown(function() {
  95                                                 wasOpen = input.autocomplete( "widget" ).is( ":visible" );
  96                                         })
  97                                         .click(function() {
  98                                                 input.focus();
  99
 100                                                 // Close if already visible
 101                                                 if ( wasOpen ) {
 102                                                         return;
 103                                                 }
 104
 105                                                 // Pass empty string as value to search for, displaying all results
 106                                                 input.autocomplete( "search", "" );
 107                                         });
 108                         },
 109
 110                         _source: function( request, response ) {
 111                                 var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
 112                                 response( this.element.children( "option" ).map(function() {
 113                                         var text = $( this ).text();
 114                                         if ( this.value && ( !request.term || matcher.test(text) ) )
 115                                                 return {
 116                                                         label: text,
 117                                                         value: text,
 118                                                         option: this
 119                                                 };
 120                                 }) );
 121                         },
 122
 123                         _removeIfInvalid: function( event, ui ) {
 124
 125                                 // Selected an item, nothing to do
 126                                 if ( ui.item ) {
 127                                         return;
 128                                 }
 129
 130                                 // Search for a match (case-insensitive)
 131                                 var value = this.input.val(),
 132                                         valueLowerCase = value.toLowerCase(),
 133                                         valid = false;
 134                                 this.element.children( "option" ).each(function() {
 135                                         if ( $( this ).text().toLowerCase() === valueLowerCase ) {
 136                                                 this.selected = valid = true;
 137                                                 return false;
 138                                         }
 139                                 });
 140
 141                                 // Found a match, nothing to do
 142                                 if ( valid ) {
 143                                         return;
 144                                 }
 145
 146                                 // Remove invalid value
 147                                 this.input
 148                                         .val( "" )
 149                                         .attr( "title", value + " didn't match any item" )
 150                                         .tooltip( "open" );
 151                                 this.element.val( "" );
 152                                 this._delay(function() {
 153                                         this.input.tooltip( "close" ).attr( "title", "" );
 154                                 }, 2500 );
 155                                 this.input.data( "ui-autocomplete" ).term = "";
 156                         },
 157
 158                         _destroy: function() {
 159                                 this.wrapper.remove();
 160                                 this.element.show();
 161                         }
 162                 });
 163         })( jQuery );
 164
 165         $(function() {
 166                 $( "#combobox" ).combobox();
 167                 $( "#toggle" ).click(function() {
 168                         $( "#combobox" ).toggle();
 169                 });
 170         });
 171         </script>
 172 </head>
 173 <body>
 174
 175 <div class="ui-widget">
 176         <label>Your preferred programming language: </label>
 177         <select id="combobox">
 178                 <option value="">Select one...</option>
 179                 <option value="ActionScript">ActionScript</option>
 180                 <option value="AppleScript">AppleScript</option>
 181                 <option value="Asp">Asp</option>
 182                 <option value="BASIC">BASIC</option>
 183                 <option value="C">C</option>
 184                 <option value="C++">C++</option>
 185                 <option value="Clojure">Clojure</option>
 186                 <option value="COBOL">COBOL</option>
 187                 <option value="ColdFusion">ColdFusion</option>
 188                 <option value="Erlang">Erlang</option>
 189                 <option value="Fortran">Fortran</option>
 190                 <option value="Groovy">Groovy</option>
 191                 <option value="Haskell">Haskell</option>
 192                 <option value="Java">Java</option>
 193                 <option value="JavaScript">JavaScript</option>
 194                 <option value="Lisp">Lisp</option>
 195                 <option value="Perl">Perl</option>
 196                 <option value="PHP">PHP</option>
 197                 <option value="Python">Python</option>
 198                 <option value="Ruby">Ruby</option>
 199                 <option value="Scala">Scala</option>
 200                 <option value="Scheme">Scheme</option>
 201         </select>
 202 </div>
 203 <button id="toggle">Show underlying select</button>
 204
 205 <div class="demo-description">
 206 <p>A custom widget built by composition of Autocomplete and Button. You can either type something into the field to get filtered suggestions based on your input, or use the button to get the full list of selections.</p>
 207 <p>The input is read from an existing select-element for progressive enhancement, passed to Autocomplete with a customized source-option.</p>
 208 <p>This is not a supported or even complete widget. Its purely for demoing what autocomplete can do with a bit of customization. <a href="http://www.learningjquery.com/2010/06/a-jquery-ui-combobox-under-the-hood">For a detailed explanation of how the widget works, check out this Learning jQuery article.</a></p>
 209 </div>
 210 </body>
 211 </html>