title: jQuery autocomplete combobox with default selected value
body: <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>