Databases
StackOverflow2013
Postsdbo
POjQuery autocomplete combobox with default selected value
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery autocomplete combobox with default selected value
    text
    copied!<p>I am using jQuery Autocomplete with combobox. I am trying to select default value like PHP option. I hope you understand my qyetion.<br></p> <p>Any ideas or suggestions? Thanks.</p> <p>My Code:</p> <pre><code>&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;jQuery UI Autocomplete - Combobox&lt;/title&gt; &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /&gt; &lt;style&gt; .custom-combobox { position: relative; display: inline-block; } .custom-combobox-toggle { position: absolute; top: 0; bottom: 0; margin-left: -1px; padding: 0; /* support: IE7 */ *height: 1.7em; *top: 0.1em; } .custom-combobox-input { margin: 0; padding: 0.3em; } &lt;/style&gt; &lt;script&gt; (function( $ ) { $.widget( "custom.combobox", { _create: function() { this.wrapper = $( "&lt;span&gt;" ) .addClass( "custom-combobox" ) .insertAfter( this.element ); this.element.hide(); this._createAutocomplete(); this._createShowAllButton(); }, _createAutocomplete: function() { var selected = this.element.children( ":selected" ) value = selected.val() ? selected.text() : ""; this.input = $( "&lt;input&gt;" ) .appendTo( this.wrapper ) .val( value ) .attr( "title", "" ) .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" ) .autocomplete({ delay: 0, minLength: 0, source: $.proxy( this, "_source" ) }) .tooltip({ tooltipClass: "ui-state-highlight" }); this._on( this.input, { autocompleteselect: function( event, ui ) { ui.item.option.selected = true; this._trigger( "select", event, { item: ui.item.option }); }, autocompletechange: "_removeIfInvalid" }); }, _createShowAllButton: function() { var input = this.input, wasOpen = false; $( "&lt;a&gt;" ) .attr( "tabIndex", -1 ) .attr( "title", "Show All Items" ) .tooltip() .appendTo( this.wrapper ) .button({ icons: { primary: "ui-icon-triangle-1-s" }, text: false }) .removeClass( "ui-corner-all" ) .addClass( "custom-combobox-toggle ui-corner-right" ) .mousedown(function() { wasOpen = input.autocomplete( "widget" ).is( ":visible" ); }) .click(function() { input.focus(); // Close if already visible if ( wasOpen ) { return; } // Pass empty string as value to search for, displaying all results input.autocomplete( "search", "" ); }); }, _source: function( request, response ) { var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" ); response( this.element.children( "option" ).map(function() { var text = $( this ).text(); if ( this.value &amp;&amp; ( !request.term || matcher.test(text) ) ) return { label: text, value: text, option: this }; }) ); }, _removeIfInvalid: function( event, ui ) { // Selected an item, nothing to do if ( ui.item ) { return; } // Search for a match (case-insensitive) var value = this.input.val(), valueLowerCase = value.toLowerCase(), valid = false; this.element.children( "option" ).each(function() { if ( $( this ).text().toLowerCase() === valueLowerCase ) { this.selected = valid = true; return false; } }); // Found a match, nothing to do if ( valid ) { return; } // Remove invalid value this.input .val( "" ) .attr( "title", value + " didn't match any item" ) .tooltip( "open" ); this.element.val( "" ); this._delay(function() { this.input.tooltip( "close" ).attr( "title", "" ); }, 2500 ); this.input.data( "ui-autocomplete" ).term = ""; }, _destroy: function() { this.wrapper.remove(); this.element.show(); } }); })( jQuery ); $(function() { $( "#combobox" ).combobox(); $( "#toggle" ).click(function() { $( "#combobox" ).toggle(); }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="ui-widget"&gt; &lt;select id="combobox"&gt; &lt;option value=""&gt;Select one...&lt;/option&gt; &lt;option value="ActionScript"&gt;ActionScript&lt;/option&gt; &lt;option value="AppleScript"&gt;AppleScript&lt;/option&gt; &lt;option value="Asp"&gt;Asp&lt;/option&gt; &lt;option value="BASIC"&gt;BASIC&lt;/option&gt; &lt;option value="C"&gt;C&lt;/option&gt; &lt;option value="C++"&gt;C++&lt;/option&gt; &lt;option value="Clojure"&gt;Clojure&lt;/option&gt; &lt;option value="COBOL"&gt;COBOL&lt;/option&gt; &lt;option value="ColdFusion"&gt;ColdFusion&lt;/option&gt; &lt;option value="Erlang"&gt;Erlang&lt;/option&gt; &lt;option value="Fortran"&gt;Fortran&lt;/option&gt; &lt;option value="Groovy"&gt;Groovy&lt;/option&gt; &lt;option value="Haskell"&gt;Haskell&lt;/option&gt; &lt;option value="Java"&gt;Java&lt;/option&gt; &lt;option value="JavaScript"&gt;JavaScript&lt;/option&gt; &lt;option value="Lisp"&gt;Lisp&lt;/option&gt; &lt;option value="Perl"&gt;Perl&lt;/option&gt; &lt;option value="PHP"&gt;PHP&lt;/option&gt; &lt;option value="Python"&gt;Python&lt;/option&gt; &lt;option value="Ruby"&gt;Ruby&lt;/option&gt; &lt;option value="Scala"&gt;Scala&lt;/option&gt; &lt;option value="Scheme"&gt;Scheme&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload