testing/ver0.01/jquery-ui-1.10.3.custom/development-bundle/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         .custom-combobox {
  18                 position: relative;
  19                 display: inline-block;
  20         }
  21         .custom-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         .custom-combobox-input {
  32                 margin: 0;
  33                 padding: 0.3em;
  34         }
  35         </style>
  36         <script>
  37         (function( $ ) {
  38                 $.widget( "custom.combobox", {
  39                         _create: function() {
  40                                 this.wrapper = $( "<span>" )
  41                                         .addClass( "custom-combobox" )
  42                                         .insertAfter( this.element );
  43
  44                                 this.element.hide();
  45                                 this._createAutocomplete();
  46                                 this._createShowAllButton();
  47                         },
  48
  49                         _createAutocomplete: function() {
  50                                 var selected = this.element.children( ":selected" ),
  51                                         value = selected.val() ? selected.text() : "";
  52
  53                                 this.input = $( "<input>" )
  54                                         .appendTo( this.wrapper )
  55                                         .val( value )
  56                                         .attr( "title", "" )
  57                                         .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
  58                                         .autocomplete({
  59                                                 delay: 0,
  60                                                 minLength: 0,
  61                                                 source: $.proxy( this, "_source" )
  62                                         })
  63                                         .tooltip({
  64                                                 tooltipClass: "ui-state-highlight"
  65                                         });
  66
  67                                 this._on( this.input, {
  68                                         autocompleteselect: function( event, ui ) {
  69                                                 ui.item.option.selected = true;
  70                                                 this._trigger( "select", event, {
  71                                                         item: ui.item.option
  72                                                 });
  73                                         },
  74
  75                                         autocompletechange: "_removeIfInvalid"
  76                                 });
  77                         },
  78
  79                         _createShowAllButton: function() {
  80                                 var input = this.input,
  81                                         wasOpen = false;
  82
  83                                 $( "<a>" )
  84                                         .attr( "tabIndex", -1 )
  85                                         .attr( "title", "Show All Items" )
  86                                         .tooltip()
  87                                         .appendTo( this.wrapper )
  88                                         .button({
  89                                                 icons: {
  90                                                         primary: "ui-icon-triangle-1-s"
  91                                                 },
  92                                                 text: false
  93                                         })
  94                                         .removeClass( "ui-corner-all" )
  95                                         .addClass( "custom-combobox-toggle ui-corner-right" )
  96                                         .mousedown(function() {
  97                                                 wasOpen = input.autocomplete( "widget" ).is( ":visible" );
  98                                         })
  99                                         .click(function() {
 100                                                 input.focus();
 101
 102                                                 // Close if already visible
 103                                                 if ( wasOpen ) {
 104                                                         return;
 105                                                 }
 106
 107                                                 // Pass empty string as value to search for, displaying all results
 108                                                 input.autocomplete( "search", "" );
 109                                         });
 110                         },
 111
 112                         _source: function( request, response ) {
 113                                 var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
 114                                 response( this.element.children( "option" ).map(function() {
 115                                         var text = $( this ).text();
 116                                         if ( this.value && ( !request.term || matcher.test(text) ) )
 117                                                 return {
 118                                                         label: text,
 119                                                         value: text,
 120                                                         option: this
 121                                                 };
 122                                 }) );
 123                         },
 124
 125                         _removeIfInvalid: function( event, ui ) {
 126
 127                                 // Selected an item, nothing to do
 128                                 if ( ui.item ) {
 129                                         return;
 130                                 }
 131
 132                                 // Search for a match (case-insensitive)
 133                                 var value = this.input.val(),
 134                                         valueLowerCase = value.toLowerCase(),
 135                                         valid = false;
 136                                 this.element.children( "option" ).each(function() {
 137                                         if ( $( this ).text().toLowerCase() === valueLowerCase ) {
 138                                                 this.selected = valid = true;
 139                                                 return false;
 140                                         }
 141                                 });
 142
 143                                 // Found a match, nothing to do
 144                                 if ( valid ) {
 145                                         return;
 146                                 }
 147
 148                                 // Remove invalid value
 149                                 this.input
 150                                         .val( "" )
 151                                         .attr( "title", value + " didn't match any item" )
 152                                         .tooltip( "open" );
 153                                 this.element.val( "" );
 154                                 this._delay(function() {
 155                                         this.input.tooltip( "close" ).attr( "title", "" );
 156                                 }, 2500 );
 157                                 this.input.data( "ui-autocomplete" ).term = "";
 158                         },
 159
 160                         _destroy: function() {
 161                                 this.wrapper.remove();
 162                                 this.element.show();
 163                         }
 164                 });
 165         })( jQuery );
 166
 167         $(function() {
 168                 $( "#combobox" ).combobox();
 169                 $( "#toggle" ).click(function() {
 170                         $( "#combobox" ).toggle();
 171                 });
 172         });
 173         </script>
 174 </head>
 175 <body>
 176
 177 <div class="ui-widget">
 178         <label>Your preferred programming language: </label>
 179         <select id="combobox">
 180                 <option value="">Select one...</option>
 181                 <option value="ActionScript">ActionScript</option>
 182                 <option value="AppleScript">AppleScript</option>
 183                 <option value="Asp">Asp</option>
 184                 <option value="BASIC">BASIC</option>
 185                 <option value="C">C</option>
 186                 <option value="C++">C++</option>
 187                 <option value="Clojure">Clojure</option>
 188                 <option value="COBOL">COBOL</option>
 189                 <option value="ColdFusion">ColdFusion</option>
 190                 <option value="Erlang">Erlang</option>
 191                 <option value="Fortran">Fortran</option>
 192                 <option value="Groovy">Groovy</option>
 193                 <option value="Haskell">Haskell</option>
 194                 <option value="Java">Java</option>
 195                 <option value="JavaScript">JavaScript</option>
 196                 <option value="Lisp">Lisp</option>
 197                 <option value="Perl">Perl</option>
 198                 <option value="PHP">PHP</option>
 199                 <option value="Python">Python</option>
 200                 <option value="Ruby">Ruby</option>
 201                 <option value="Scala">Scala</option>
 202                 <option value="Scheme">Scheme</option>
 203         </select>
 204 </div>
 205 <button id="toggle">Show underlying select</button>
 206
 207 <div class="demo-description">
 208 <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>
 209 <p>The input is read from an existing select-element for progressive enhancement, passed to Autocomplete with a customized source-option.</p>
 210 <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>
 211 </div>
 212 </body>
 213 </html>