title: Append extra row to jqueryui autocomplete (even if autocomplete doesn't have any matches)
body: <p>How should an extra row be added to the jQueryUI Autocomplete results?  I've implemented <a href="https://stackoverflow.com/questions/8598098/add-additional-link-to-jquery-ui-autocomplete-list">Add additional link to jquery ui autocomplete list</a> as shown below, but it will not display the extra row if autocomplete doesn't have any matches.</p>
  
  <p>What I have tried...</p>
  
  <p>To append an extra row to the jQueryUI autocomplete results, I came up with the below script. The extra row is added using the following:</p>
  
  <pre><code>open: function( event, ui ) {
     $('&lt;li id="add-new"&gt;Add New&lt;/li&gt;')
     .on('click', function(event) {$("#dialog-add-new").dialog("open");})
     .appendTo('ul.ui-autocomplete');
  }
  </code></pre>
  
  <p>I have three problems with my implementation:</p>
  
  <ol>
  <li>If no results match the selected text, the new row isn't displayed.  Type "On" in the input and you will see it.  Type "xx" in the input and it isn't displayed. I suppose I could just have the server populate it, but seems like a waste, and would rather do it client-side.</li>
  <li>Maybe problems if I have two <code>ul.ui-autocomplete</code> on the page?</li>
  <li>The added row doesn't have the same appearance as the autocomplete rows.</li>
  </ol>
  
  <p>The first item is the most critical.  How should an extra row be added to the jQueryUI Autocomplete results even if Autocomplete doesn't have any results?</p>
  
  <p>Please see <a href="http://jsbin.com/quyexu/1/" rel="nofollow noreferrer">http://jsbin.com/quyexu/1/</a> for a live demo of the below script.  You could ignore the part regarding the dialog as it seems to be working.  Thank you</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
          &lt;title&gt;Testing&lt;/title&gt;  
          &lt;link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" /&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;style type="text/css"&gt;
          &lt;/style&gt; 
          &lt;script type="text/javascript"&gt; 
              var source = [
                  {value: "one",id: 1},
                  {value: "two",id: 2},
                  {value: "three",id: 3}
              ];
              $(function(){
                  $("#autocomplete").autocomplete({
                      source: source,
                      minLength: 1,
                      focus: function( event, ui ) {event.preventDefault();$(this).val( ui.item.label );},
                      select: function(event, ui) {
                          console.log(ui)
                          $(this).val('');//.blur();
                          event.preventDefault(); // cancel default behavior which updates input field
                          $("#my-list").append('&lt;li data-id="'+ui.item.id+'"&gt;'+ui.item.value+'&lt;/li&gt;');
                      },
                      open: function( event, ui ) {
                          console.log(event,ui,this);
                          $('&lt;li id="add-new"&gt;Add New&lt;/li&gt;')
                          .on('click', function(event) {$("#dialog-add-new").dialog("open");})
                          .appendTo('ul.ui-autocomplete');
                      }
                  });
  
                  $("#dialog-add-new").dialog({
                      autoOpen: false,resizable: false,height: 200,width: 380, modal: true,
                      open        : function() {},
                      buttons     : [
                          {
                              text    : 'ADD NEW',
                              "class"  : 'green wide',
                              click    : function() {
                                  //Use Ajax to save value and get associated ID
                                  var name=$('#new-name').val();
                                  var id=123;
                                  $("#my-list").append('&lt;li data-id="'+id+'"&gt;'+name+'&lt;/li&gt;');
                                  $("#autocomplete").val('').focus();
                                  $(this).dialog("close");
                              }
                          },
                          {
                              text    : 'CLOSE',
                              "class"  : 'gray',
                              click    : function() {$(this).dialog("close");}
                          }
                      ]    
                  });
              });
          &lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;input type="text" id="autocomplete" /&gt;
          &lt;ul id="my-list"&gt;&lt;/ul&gt;
          &lt;div id="dialog-add-new" class="dialog" title="Add New"&gt;
              &lt;form&gt;
                  &lt;input type="text" name="new-name" id="new-name" /&gt;
              &lt;/form&gt;
          &lt;/div&gt;
  
      &lt;/body&gt; 
  &lt;/html&gt; 
  </code></pre>