Jquery UI Autocomplete from remote source categorized

Question

There are nice documentation on the jquery ui site on showing auto-complete options categorized http://jqueryui.com/demos/autocomplete/#categories

And there is also an example about showing remote suggestions. http://jqueryui.com/demos/autocomplete/#remote

But what I want is to load auto-complete options categorized from a remote source. How can I do that? Can any one point me to example or some code snippet? I have been trying this for long. If my search.php can generate that source needed for the categorized suggestion. How do i implement it in the front end?

I'm able to generate return this from my php.(Thats how its needed for categorized autocomplete)

                    [
   { 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" }
   ];

But how do i implement in the front-end? This is the code available for remotesource in the site. How do i specify that the php will give results for categorized suggestion?

 <script>
 $(function() {
  function log( message ) {
   $( "<div/>" ).text( message ).prependTo( "#log" );
   $( "#log" ).attr( "scrollTop", 0 );
  }

  $( "#birds" ).autocomplete({
   source: "search.php",
   minLength: 2,
   select: function( event, ui ) {
    log( ui.item ?
     "Selected: " + ui.item.value + " aka " + ui.item.id :
     "Nothing selected, input was " + this.value );
   }
  });
 });
 </script>

Answer 1

The examples on the jqueryui site look like they would work. Have you tried it? You just need to "override" the _renderItem method as shown in the category example.

Does this work?

<script>
$.widget( "custom.catcomplete", $.ui.autocomplete, {
    _renderMenu: function( ul, items ) {
        var self = this,
            currentCategory = "";
        $.each( items, function( index, item ) {
            if ( item.category != currentCategory ) {
                ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
                currentCategory = item.category;
            }
            self._renderItem( ul, item );
        });
    }
});

$( "#search" ).catcomplete({
    source: 'search.php'
});
</script>