title: How can I add an item to a combo box after an ajax query?
body: <p>I can't manage to find the solution to my problem. I have the combobox example given with JqueryUI.</p>
  
  <p>My source is a Json Ajax and all this works well. But I Want to ADD an item to my combobox (I want to append it to Ajax items) manually which say "ADD A NEW ITEM" and when i click on it, my modal form becomes visible.</p>
  
  <p>I put in my code some comments where I need help to explain my problem more.</p>
  
  <pre><code> $('#combobox_scenario').combobox({
      source: function( request, response ) {
          $.ajax({
              url: "?module=gestionApplication&amp;action=getListeScenarios&amp;option="+encodeURI($(".ui-combobox:first input").val()),
              dataType: "json",
              success: function( data ) {
                  response( $.map( data, function( item ) {
                      return {
                          label: item.test,
                          value: item.test,
                          option: this
                      }
                  }));
                  //I want to add an item Here !
                  //response.add({label: 'Ajouter un Scénario',value: 'Ajouter un Scénario',option : this});
                  console.log(response);
              }
          });
      },
      selected: function(event, ui) {
          var scenario = ui.item2;
          //if (scenario = "This Item added manually") 
              //MyForm.show()
          //else
              $.ajax({
                  url: "?module=gestionApplication&amp;action=getScenario&amp;option="+encodeURI(scenario),
                  dataType: "json",
                  success: function( data ) {
                      data = data[0];
                      $("#scenario").show();
                      $("#scenario").html('&lt;hr&gt;&lt;h2&gt;Informations sur le scénario '+data.TEST+'&lt;/h2&gt;&lt;p&gt;Description : '+data.DESCRIPTION+'&lt;/p&gt;'+'&lt;p&gt;Application : '+data.APPLICATION+'&lt;/p&gt;');
                  }
              });
          //EndIf
      }
  });
  </code></pre>
  
  <h1>Edit</h1>
  
  <p>Here's my autocomplete combobox code:</p>
  
  <pre><code>(function( $ ) {
  $.widget( "ui.combobox", {
      _create: function() {
          var input,
              self = this,
              source = this.options,
              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: this.options.source,
                  select: function( event, ui ) {
                      ui.item.option.selected = true;
                      self._trigger( "selected", event, {
                          item: ui.item.option,
                          item2 : ui.item.label
                      });
                  },
                  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>