title: Dynamically add new options to existing custom autocomplete
body: <p>How could I dynamically add a <code>label</code> to existing categories in jQuery UI custom autocomplete? I have made a custom <code>autocomplete</code> like <a href="https://jqueryui.com/autocomplete/#categories" rel="nofollow">described here (jQuery UI docs for autocomplete)</a>:</p>
  
  <pre><code>&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;jQuery UI Autocomplete - Categories&lt;/title&gt;
    &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"&gt;
    &lt;script src="//code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
    &lt;script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="/resources/demos/style.css"&gt;
    &lt;style&gt;
    .ui-autocomplete-category {
      font-weight: bold;
      padding: .2em .4em;
      margin: .8em 0 .2em;
      line-height: 1.5;
    }
    &lt;/style&gt;
    &lt;script&gt;
    $.widget( "custom.catcomplete", $.ui.autocomplete, {
      _create: function() {
        this._super();
        this.widget().menu( "option", "items", "&gt; :not(.ui-autocomplete-category)" );
      },
      _renderMenu: function( ul, items ) {
        var that = this,
          currentCategory = "";
        $.each( items, function( index, item ) {
          var li;
          if ( item.category != currentCategory ) {
            ul.append( "&lt;li class='ui-autocomplete-category'&gt;" + item.category + "&lt;/li&gt;" );
            currentCategory = item.category;
          }
          li = that._renderItemData( ul, item );
          if ( item.category ) {
            li.attr( "aria-label", item.category + " : " + item.label );
          }
        });
      }
    });
    &lt;/script&gt;
    &lt;script&gt;
    $(function() {
      var data = [
        { label: "anders", category: "" },
        { label: "andreas", category: "" },
        { label: "antal", category: "" },
        { label: "annhhx10", category: "Products" },
        { label: "annk K12", category: "Products" },
        { label: "annttop C13", category: "Products" },
        { label: "anders andersson", category: "People" },
        { label: "andreas andersson", category: "People" },
        { label: "andreas johnson", category: "People" }
      ];
  
      $( "#search" ).catcomplete({
        delay: 0,
        source: data
      });
    });
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;label for="search"&gt;Search: &lt;/label&gt;
  &lt;input id="search"&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The above code creates an autocomplete widget. But at some point of time, I need to add new options with <code>label</code> and <code>category</code>, for example, when my DB gets updated with a certain value. How cand I modify the list of available options of my existing custom autocomplete widget?</p>