title: jQuery UI Autocomplete with Categories
body: <p>I'm using jQuery UI's Auto Complete to provide suggestions from a remote source for a search input box.  I've got the "remote datasource" example working.  For example, this works:</p>
  
  <pre><code>    $("#search").autocomplete({
          source: "search_basic.php",
          minLength: 2
      });
  </code></pre>
  
  <p>However, I'd like to use the "<a href="http://jqueryui.com/demos/autocomplete/#categories" rel="noreferrer">Categories</a>" example to sort the suggesions by category.  The example from the jQuery UI site, with an inline set of data works fine:</p>
  
  <pre><code>       &lt;script&gt;
   $.widget( "custom.catcomplete", $.ui.autocomplete, {
    _renderMenu: function( ul, items ) {
     var self = 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;
      }
      self._renderItem( ul, item );
     });
    }
   });
  
   $(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;
  </code></pre>
  
  <p>However, when I try to get the data from my remote file</p>
  
  <pre><code>source: 'search.php'
  </code></pre>
  
  <p>it doesn't suggest anything.  Here's the code with the search.php:</p>
  
  <pre><code>    &lt;script&gt;
   $.widget( "custom.catcomplete", $.ui.autocomplete, {
    _renderMenu: function( ul, items ) {
     var self = 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;
      }
      self._renderItem( ul, item );
     });
    }
   });
  
   $(function() {
  
    $( "#search" ).catcomplete({
     source: 'search.php'
    });
   });
   &lt;/script&gt;
  </code></pre>
  
  <p>The data that search.php is returning is correctly formatted:</p>
  
  <pre><code>         [
   { label: "annhhx10", category: "Products" },
   { label: "annttop", category: "Products" },
   { label: "anders", category: "People" },
   { label: "andreas", category: "People" }
   ]
  </code></pre>
  
  <p>Any help would be greatly appreciated!</p>
  
  <p>Thanks,
  Greg</p>