title: Multiple instances of jQuery autocomplete combobox on one page
body: <p>I would like to have <strong>multiple JQuery autocomplete comboboxes</strong> on one html page. (How) is this possibe?</p>
  <p>I discovered the id for the combobox matters. In the example below the only combobox shown with JQuery is the first one.
  I prefer not to duplicate (too many of) the JQuery script code (I've put this code in a .js-file and generate the comboboxes in a .php-file)</p>
  <p>I have this (this is just the code from the demo example at <a href="http://jqueryui.com/demos/autocomplete/#combobox" rel="nofollow noreferrer">http://jqueryui.com/demos/autocomplete/#combobox</a>)</p>
  <pre><code>&lt;select id=&quot;combobox&quot;&gt;
      &lt;option value=&quot;&quot;&gt;Select one...&lt;/option&gt;
      &lt;option value=&quot;ActionScript&quot;&gt;ActionScript&lt;/option&gt;
      &lt;option value=&quot;AppleScript&quot;&gt;AppleScript&lt;/option&gt;
      &lt;option value=&quot;Asp&quot;&gt;Asp&lt;/option&gt;
      &lt;option value=&quot;BASIC&quot;&gt;BASIC&lt;/option&gt;
      &lt;option value=&quot;C&quot;&gt;C&lt;/option&gt;
      &lt;option value=&quot;C++&quot;&gt;C++&lt;/option&gt;
      &lt;option value=&quot;Clojure&quot;&gt;Clojure&lt;/option&gt;
      &lt;option value=&quot;COBOL&quot;&gt;COBOL&lt;/option&gt;
      &lt;option value=&quot;ColdFusion&quot;&gt;ColdFusion&lt;/option&gt;
      &lt;option value=&quot;Erlang&quot;&gt;Erlang&lt;/option&gt;
      &lt;option value=&quot;Fortran&quot;&gt;Fortran&lt;/option&gt;
      &lt;option value=&quot;Groovy&quot;&gt;Groovy&lt;/option&gt;
      &lt;option value=&quot;Haskell&quot;&gt;Haskell&lt;/option&gt;
      &lt;option value=&quot;Java&quot;&gt;Java&lt;/option&gt;
      &lt;option value=&quot;JavaScript&quot;&gt;JavaScript&lt;/option&gt;
      &lt;option value=&quot;Lisp&quot;&gt;Lisp&lt;/option&gt;
      &lt;option value=&quot;Perl&quot;&gt;Perl&lt;/option&gt;
      &lt;option value=&quot;PHP&quot;&gt;PHP&lt;/option&gt;
      &lt;option value=&quot;Python&quot;&gt;Python&lt;/option&gt;
      &lt;option value=&quot;Ruby&quot;&gt;Ruby&lt;/option&gt;
      &lt;option value=&quot;Scala&quot;&gt;Scala&lt;/option&gt;
      &lt;option value=&quot;Scheme&quot;&gt;Scheme&lt;/option&gt;
  &lt;/select&gt;
  &lt;select id=&quot;combobox2&quot;&gt;
      &lt;option value=&quot;&quot;&gt;Select one...&lt;/option&gt;
      &lt;option value=&quot;ActionScript&quot;&gt;ActionScript&lt;/option&gt;
      &lt;option value=&quot;AppleScript&quot;&gt;AppleScript&lt;/option&gt;
      &lt;option value=&quot;Asp&quot;&gt;Asp&lt;/option&gt;
      &lt;option value=&quot;BASIC&quot;&gt;BASIC&lt;/option&gt;
      &lt;option value=&quot;C&quot;&gt;C&lt;/option&gt;
      &lt;option value=&quot;C++&quot;&gt;C++&lt;/option&gt;
      &lt;option value=&quot;Clojure&quot;&gt;Clojure&lt;/option&gt;
      &lt;option value=&quot;COBOL&quot;&gt;COBOL&lt;/option&gt;
      &lt;option value=&quot;ColdFusion&quot;&gt;ColdFusion&lt;/option&gt;
      &lt;option value=&quot;Erlang&quot;&gt;Erlang&lt;/option&gt;
      &lt;option value=&quot;Fortran&quot;&gt;Fortran&lt;/option&gt;
      &lt;option value=&quot;Groovy&quot;&gt;Groovy&lt;/option&gt;
      &lt;option value=&quot;Haskell&quot;&gt;Haskell&lt;/option&gt;
      &lt;option value=&quot;Java&quot;&gt;Java&lt;/option&gt;
      &lt;option value=&quot;JavaScript&quot;&gt;JavaScript&lt;/option&gt;
      &lt;option value=&quot;Lisp&quot;&gt;Lisp&lt;/option&gt;
      &lt;option value=&quot;Perl&quot;&gt;Perl&lt;/option&gt;
      &lt;option value=&quot;PHP&quot;&gt;PHP&lt;/option&gt;
      &lt;option value=&quot;Python&quot;&gt;Python&lt;/option&gt;
      &lt;option value=&quot;Ruby&quot;&gt;Ruby&lt;/option&gt;
      &lt;option value=&quot;Scala&quot;&gt;Scala&lt;/option&gt;
      &lt;option value=&quot;Scheme&quot;&gt;Scheme&lt;/option&gt;
  &lt;/select&gt;
  
  (function( $ ) {
      $.widget( &quot;ui.combobox&quot;, {
          _create: function() {
              var self = this,
                  select = this.element.hide(),
                  selected = select.children( &quot;:selected&quot; ),
                  value = selected.val() ? selected.text() : &quot;&quot;;
              var input = this.input = $( &quot;&lt;input&gt;&quot; )
                  .insertAfter( select )
                  .val( value )
                  .autocomplete({
                      delay: 0,
                      minLength: 0,
                      source: function( request, response ) {
                          var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), &quot;i&quot; );
                          response( select.children( &quot;option&quot; ).map(function() {
                              var text = $( this ).text();
                              if ( this.value &amp;&amp; ( !request.term || matcher.test(text) ) )
                                  return {
                                      label: text.replace(
                                          new RegExp(
                                              &quot;(?![^&amp;;]+;)(?!&lt;[^&lt;&gt;]*)(&quot; +
                                              $.ui.autocomplete.escapeRegex(request.term) +
                                              &quot;)(?![^&lt;&gt;]*&gt;)(?![^&amp;;]+;)&quot;, &quot;gi&quot;
                                          ), &quot;&lt;strong&gt;$1&lt;/strong&gt;&quot; ),
                                      value: text,
                                      option: this
                                  };
                          }) );
                      },
                      select: function( event, ui ) {
                          ui.item.option.selected = true;
                          self._trigger( &quot;selected&quot;, event, {
                              item: ui.item.option
                          });
                      },
                      change: function( event, ui ) {
                          if ( !ui.item ) {
                              var matcher = new RegExp( &quot;^&quot; + $.ui.autocomplete.escapeRegex( $(this).val() ) + &quot;$&quot;, &quot;i&quot; ),
                                  valid = false;
                              select.children( &quot;option&quot; ).each(function() {
                                  if ( $( this ).text().match( matcher ) ) {
                                      this.selected = valid = true;
                                      return false;
                                  }
                              });
                              if ( !valid ) {
                                  // remove invalid value, as it didn't match anything
                                  $( this ).val( &quot;&quot; );
                                  select.val( &quot;&quot; );
                                  input.data( &quot;autocomplete&quot; ).term = &quot;&quot;;
                                  return false;
                              }
                          }
                      }
                  })
                  .addClass( &quot;ui-widget ui-widget-content ui-corner-left&quot; );
  
              input.data( &quot;autocomplete&quot; )._renderItem = function( ul, item ) {
                  return $( &quot;&lt;li&gt;&lt;/li&gt;&quot; )
                      .data( &quot;item.autocomplete&quot;, item )
                      .append( &quot;&lt;a&gt;&quot; + item.label + &quot;&lt;/a&gt;&quot; )
                      .appendTo( ul );
              };              
              
              this.button = $( &quot;&lt;button type='button' class='ui-button ui-widget ui-state-default ui-button-icon-only ui-corner-right ui-button-icon ui-state-hover'&gt;&lt;span class='ui-button-icon-primary ui-icon ui-icon-triangle-1-s'&gt;&lt;/span&gt;&lt;span class='ui-button-text'&gt;&amp;nbsp;&lt;/span&gt;&lt;/button&gt;&quot; )
                  .attr( &quot;tabIndex&quot;, -1 )
                  .attr( &quot;title&quot;, &quot;Show All Items&quot; )
                  .attr( &quot;role&quot;, &quot;button&quot; )
                  .attr( &quot;aria-disabled&quot;, &quot;false&quot; )
                  .insertAfter( input )
                  .button({
                      icons: {
                          primary: &quot;ui-icon-triangle-1-s&quot;
                      },
                      text: false
                  })
                  .click(function() {
                      // close if already visible
                      if ( input.autocomplete( &quot;widget&quot; ).is( &quot;:visible&quot; ) ) {
                          input.autocomplete( &quot;close&quot; );
                          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( &quot;search&quot;, &quot;&quot; );
                      input.focus();
                  });
          },
  
          destroy: function() {
              this.input.remove();
              this.button.remove();
              this.element.show();
              $.Widget.prototype.destroy.call( this );
          }
      });
  })( jQuery );
  
  $(function() {
      $( &quot;#combobox&quot; ).combobox();
      $( &quot;#toggle&quot; ).click(function() {
          $( &quot;#combobox&quot; ).toggle();
      });
  });
  </code></pre>
  <p>Thanks!</p>
  <p>Jan</p>