title: jQuery ui autocomplete combobox - default value when user enters non valid value
body: <p>EDIT: Doh! I should have placed my code here too! Here it is:</p>
  
  <p>My code to call the combobox:</p>
  
  <pre><code>jQuery( "#select_performance" ).combobox();
  jQuery( "#select_state" ).combobox();
  jQuery( "#select_postcode" ).combobox();
  jQuery( "#select_install" ).combobox();
  jQuery( "#select_customer" ).combobox();
  jQuery( "#select_address" ).combobox();
  </code></pre>
  
  <p>My code (as is from JQuery ui) to define the fields:</p>
  
  <pre><code>/*** Set up multiselect drop down lists ***/
  (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"
                  }).on('mouseup', function() {
                      $(this).select();
                  });
  
              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 );
  </code></pre>
  
  <p>I have 6 jQuery autocomplete comboboxes on a page. Each has selected a default item set up on load (first item of the list). When a user types in an invalid entry, (or blanks the input box) I get the tooltip saying "invalid entry". Is there a way to have the value be re-set to the initially selected / default entry (first list item)?</p>
  
  <p>I cannot seem to find the answer to this (or perhaps I am asking the wrong way).</p>
  
  <p>Thanks!</p>