title: jQuery combobox multiple instances
body: <p>I'm using <a href="http://jqueryui.com/autocomplete/#combobox" rel="nofollow">combobox</a> for two "select" dropdowns on my site. </p>
  
  <p>I need to check to see which of the comboboxes the user has clicked. </p>
  
  <p>The selects are like this:</p>
  
  <pre><code>&lt;select name="select1" id="combobox"/&gt;
  &lt;select name="select2" id="combobox"/&gt;
  </code></pre>
  
  <p>If the user cannot find the value in the drop down, the value is added to the database on form submit. I got the php side of this down. I just need to change a value of form element, when the combobox can't match it. I've got this working for 1 select, bet I cant distinguish which combobox the user has typed in.</p>
  
  <p>The jquery code is like this:</p>
  
  <pre><code>      (function( $ ) {
  $.widget( "ui.combobox", {
    _create: function() {
      var input,
        that = this,
        select = this.element.hide(),
        selected = select.children( ":selected" ),
        value = selected.val() ? selected.text() : "",
        wrapper = this.wrapper = $( "&lt;span&gt;" )
          .addClass( "ui-combobox" )
          .insertAfter( select );
  
      function removeIfInvalid(element) {
        var value = $( element ).val(),
          matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( value ) + "$", "i" ),
          valid = false;
        select.children( "option" ).each(function() {
          if ( $( this ).text().match( matcher ) ) {
            this.selected = valid = true;
            return false;
          }
        });
        if ( !valid ) {
          // remove invalid value, as it didn't match anything
          $( element )
           // .val( "" )
            .attr( "title", value + " will be added as new." )
            .tooltip( "open" );
          //select.val( "" );
          //add new site
          $('#new_site_added').val(value);
          alert(ui.item.option);
  
          setTimeout(function() {
            input.tooltip( "close" ).attr( "title", "" );
          }, 2500 );
          //input.data( "autocomplete" ).term = "";
          return false;
        }
      }
  
      input = $( "&lt;input&gt;" )
        .appendTo( wrapper )
        .val( value )
        .attr( "title", "" )
        .addClass( "ui-state-default ui-combobox-input" )
        .autocomplete({
          delay: 0,
          minLength: 0,
          source: function( request, response ) {
            var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
            response( select.children( "option" ).map(function() {
              var text = $( this ).text();
              if ( this.value &amp;&amp; ( !request.term || matcher.test(text) ) )
                return {
                  label: text.replace(
                    new RegExp(
                      "(?![^&amp;;]+;)(?!&lt;[^&lt;&gt;]*)(" +
                      $.ui.autocomplete.escapeRegex(request.term) +
                      ")(?![^&lt;&gt;]*&gt;)(?![^&amp;;]+;)", "gi"
                    ), "&lt;strong&gt;$1&lt;/strong&gt;" ),
                  value: text,
                  option: this
                };
            }) );
          },
          select: function( event, ui ) {
            ui.item.option.selected = true;
            that._trigger( "selected", event, {
              item: ui.item.option
            });
            $('#hidden_element_on_page').val("0"); // this is where i would like to check which combobox is selected.
  
          },
          change: function( event, ui ) {
            if ( !ui.item )
              return removeIfInvalid( this );
          }
        })
        .addClass( "ui-widget ui-widget-content ui-corner-left" );
  
      input.data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "&lt;li&gt;" )
          .data( "item.autocomplete", item )
          .append( "&lt;a&gt;" + item.label + "&lt;/a&gt;" )
          .appendTo( ul );
      };
  
      $( "&lt;a&gt;" )
        .attr( "tabIndex", -1 )
        .attr( "title", "Show All Items" )
        .tooltip()
        .appendTo( wrapper )
        .button({
          icons: {
            primary: "ui-icon-triangle-1-s"
          },
          text: false
        })
        .removeClass( "ui-corner-all" )
        .addClass( "ui-corner-right ui-combobox-toggle" )
        .click(function() {
          // close if already visible
          if ( input.autocomplete( "widget" ).is( ":visible" ) ) {
            input.autocomplete( "close" );
            removeIfInvalid( input );
            return;
          }
  
          // work around a bug (likely same cause as #5265)
          $( this ).blur();
  
          // pass empty string as value to search for, displaying all results
          input.autocomplete( "search", "" );
          input.focus();
        });
  
        input
          .tooltip({
            position: {
              of: this.button
            },
            tooltipClass: "ui-state-highlight"
          });
    },
  
    destroy: function() {
      this.wrapper.remove();
      this.element.show();
      $.Widget.prototype.destroy.call( this );
    }
  });
    })( jQuery );
  
    $(function() {
     $( "#combobox, #combobox2" ).combobox();
      $( "#toggle" ).click(function() {
        $( "#combobox, #combobox2" ).toggle();
      });
    });
  </code></pre>