title: Add "Show All' to the bottom of a list for Jquery Custom Autocomplete
body: <p>How do I create a link at the bottom of a Autocomplete that has categories? Ly MVC application shows selections and categories via textbox using jQuery's autocomplete &amp; catcomplete </p>
  
  <p>I want to show "Show All" at the bottom of my list that will essentially click the search button with an empty string text box. (the search button functions are already implemented, and searching string empty returns all</p>
  
  <p>so </p>
  
  <ol>
  <li>What is the jQuery snippet to append "show all" to the bottom of the list.?</li>
  <li>On item select, fire click searchbutton function?</li>
  <li><p>On item select "Select All", set value of search box to "" and click search?</p>
  
  <pre><code>public class SearchCriteria
  {
      public string label { get; set; }
      public string category { get; set; }
  }
  
  &lt;label for="search"&gt;Search: &lt;/label&gt;
  &lt;input id="search"&gt;
  
  &lt;script&gt;
  $.widget("custom.catcomplete", $.ui.autocomplete, 
  {
  _renderMenu: function (ul, items)
  {
      var that = this,
      currentCategory = "";
      $.each(items, function (index, item)
      {
          if (item.category != currentCategory)
          {
              ul.append("&lt;li class='ui-autocomplete-category'&gt;" + item.category + "&lt;/li&gt;");
              currentCategory = item.category;
          }
          that._renderItemData(ul, item);
      });
  }
  
  });
  
  $(function () {
  $("#search").catcomplete({
      delay: 0,
      source: '@Url.Action("AutoComplete", "Search")'
  });
  });
  &lt;/script&gt;
  </code></pre></li>
  </ol>