Autocomplete: How to display a certain number of items for one category?

Question

JavaScript

Help display the desired number of items in the category. For example 3 for each category.
I'm trying to iterate items in _renderMenu , item in _renderItemData and in ajax query results. Everything is in shambles.

$.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 style='clear:both'class='ui-autocomplete-category'>" + item.category + "</li>");
                currentCategory = item.category;
            }
            self._renderItemData(ul, item);
        });
    }
});

$( document ).ready(function() {
  $( 'input[name="query"]' ).catcomplete({
    delay: 500,
    minLength: 4,
    source: function(request, response){
      $.ajax({
        type: "GET",
        url: "/autocomplete.json",
        dataType: "json",
        data:{ query: request.term },
        success: function(data){
          if (data.length > 0) {
            response( $.map( data, function( item ) {
              return {
                label: item.label,
                id: item.id,
                category: item.category,
                value: item.value
              }
            }));
          }else{
            response([{ category: 'No results found', label:""}]);
          }
        }
      });
    },
    select: function(event, ui) {
      document.location.href = "/items/" + ui.item.id;
    }
  });
});