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">
19 display: inline-block;
21 .custom-combobox-toggle {
31 .custom-combobox-input {
38 $.widget( "custom.combobox", {
40 this.wrapper = $( "<span>" )
41 .addClass( "custom-combobox" )
42 .insertAfter( this.element );
45 this._createAutocomplete();
46 this._createShowAllButton();
49 _createAutocomplete: function() {
50 var selected = this.element.children( ":selected" ),
51 value = selected.val() ? selected.text() : "";
53 this.input = $( "<input>" )
54 .appendTo( this.wrapper )
57 .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
61 source: $.proxy( this, "_source" )
64 tooltipClass: "ui-state-highlight"
67 this._on( this.input, {
68 autocompleteselect: function( event, ui ) {
69 ui.item.option.selected = true;
70 this._trigger( "select", event, {
75 autocompletechange: "_removeIfInvalid"
79 _createShowAllButton: function() {
80 var input = this.input,
84 .attr( "tabIndex", -1 )
85 .attr( "title", "Show All Items" )
87 .appendTo( this.wrapper )
90 primary: "ui-icon-triangle-1-s"
94 .removeClass( "ui-corner-all" )
95 .addClass( "custom-combobox-toggle ui-corner-right" )
96 .mousedown(function() {
97 wasOpen = input.autocomplete( "widget" ).is( ":visible" );
102 // Close if already visible
107 // Pass empty string as value to search for, displaying all results
108 input.autocomplete( "search", "" );
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) ) )
125 _removeIfInvalid: function( event, ui ) {
127 // Selected an item, nothing to do
132 // Search for a match (case-insensitive)
133 var value = this.input.val(),
134 valueLowerCase = value.toLowerCase(),
136 this.element.children( "option" ).each(function() {
137 if ( $( this ).text().toLowerCase() === valueLowerCase ) {
138 this.selected = valid = true;
143 // Found a match, nothing to do
148 // Remove invalid value
151 .attr( "title", value + " didn't match any item" )
153 this.element.val( "" );
154 this._delay(function() {
155 this.input.tooltip( "close" ).attr( "title", "" );
157 this.input.data( "ui-autocomplete" ).term = "";
160 _destroy: function() {
161 this.wrapper.remove();
168 $( "#combobox" ).combobox();
169 $( "#toggle" ).click(function() {
170 $( "#combobox" ).toggle();
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>
205 <button id="toggle">Show underlying select</button>
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>