title: Jquery: change Json source of Autocomplete Combobox widget?
body: <p>First of all i start with Jquery and my question is a little noobie but i didn't manage to find a solution.
  I got the official Combobox example. I changed it to use a Json source.
  But i want 2 instances of the combobox, with a different URL for the source.</p>
  
  <p>(I think i dont need to create a second Combobox function only to change the source, tell me if im wrong)</p>
  
  <p>Here's my code:</p>
  
  <pre><code>&lt;div id="etape1"&gt;
  &lt;div class="ui-widget"&gt;
      &lt;label&gt;Veuillez selectionner une application: &lt;/label&gt;
      &lt;select id="combobox_application"&gt;
          &lt;option value=""&gt;Select one...&lt;/option&gt;
          &lt;option value="Chargement en cours"&gt;Chargement en cours&lt;/option&gt;
  
      &lt;/select&gt;
  &lt;/div&gt;
  
  &lt;button id="create-user"&gt;Ajouter une application&lt;/button&gt;
  &lt;/div&gt;
  &lt;div id="etape2" style="display:none"&gt;
  &lt;div class="ui-widget"&gt;
      &lt;label&gt;Veuillez selectionner un scenario: &lt;/label&gt;
      &lt;select id="combobox_scenario"&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;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <h2>EDIT</h2>
  
  <p>Thx for your help, unfortunately it dosn't work. I'm here:</p>
  
  <ul>
  <li>Got a jquery-combobox.js (source below)</li>
  <li><p>In my main page, got this:</p>
  
  <pre><code>&lt;script&gt;
  $(function() {
  $('#combobox_application').combobox({
      source: function(req,add) {
          $.ajax({
              url: "?module=gestionApplication&amp;action=getListeApplications",
              dataType:"json",
              success: function(data, textStatus, XMLHttpRequest){
                  alert(data);
                  add(data);
              }
          });
      },
      selected: function(event, ui) {
          $("#etape2").css('display', 'block');
      }
  });
     $('#combobox_scenario').combobox({
      source: function(req,add) {
          $.ajax({
              url: "?module=gestionApplication&amp;action=getListeScenarios",
              dataType:"json",
              success: function(data, textStatus, XMLHttpRequest){
                  alert(data);
                  add(data);
              }
          });
      }
  });
  </code></pre></li>
  </ul>
  
  <p>jquery-combobox.js:</p>
  
  <p>-</p>
  
  <pre><code>(function( $ ) {
  $.widget( "ui.combobox", {
      _create: function() {
          var input,
              self = 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 );
          input = $( "&lt;input&gt;" )
              .appendTo( wrapper )
              .val( value )
              .addClass( "ui-state-default ui-combobox-input" )
              .autocomplete({
                  delay: 0,
                  minLength: 0,
  
                  // Need define source in my main js
                  //~ source: function( request, response ) {
                      //~ $.ajax({
                          //~ url: "?module=gestionApplication&amp;action=getListeApplications",
                          //~ dataType: "json",
  
                          //~ success: function( data ) {
                              //~ response( $.map( data, function( item ) {
                                  //~ return {
                                      //~ label: item.nom,
                                      //~ value: item.nom,
                                      //~ option: this
                                  //~ }
                              //~ }));
                          //~ }
                      //~ });
                  //~ },
                  select: function( event, ui ) {
                      ui.item.option.selected = true;
                      self._trigger( "selected", event, {
                          item: ui.item.option
                      });
                  },
                  change: function( event, ui ) {
                      if ( !ui.item ) {
                          var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "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
                              $( this ).val( "" );
                              select.val( "" );
                              input.data( "autocomplete" ).term = "";
                              return false;
                          }
                      }
                  }
              })
              .addClass( "ui-widget ui-widget-content ui-corner-left" );
  
          input.data( "autocomplete" )._renderItem = function( ul, item ) {
              return $( "&lt;li&gt;&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" )
              .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" );
                      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();
              });
      },
  
      destroy: function() {
          this.wrapper.remove();
          this.element.show();
          $.Widget.prototype.destroy.call( this );
      }
  });
  })( jQuery );
  </code></pre>
  
  <p>But this dosn't work, selected is ok, but source seems to not change anything.</p>
  
  <h2>Thx a lot for your help !</h2>