Providing multiple lists in jQuery user interface autocomplete

Question

I'm trying to create a search on a site that spans multiple objects / models, and I wanted to use jQuery autocomplete to display data dynamically. The problem is that I want to pass three json lists instead of one and display three lists ( <ul></ul> ), not one. I did this by passing a dict containing the json list as source , but I have no idea how to then cover each dict entry separately. I suppose I need to use _renderMenu and _renderItem , but I cannot figure out how to do this.

Thanks in advance.

EDIT

I can manipulate data, but I want; while I have:

 {"ingredients": "[]", "products": "[]", "news": "[{"id": 7, "value": "Test revisionjjjj", "label": "Test revisionjjjj"}]"} 

And I want this to be something like:

 <li class="ingredients"></li> <li class="products"></li> <li class="news"> <ul ...>Test revisionjjjj</ul> </li> 

Answer 1

According to jQuery examples you should do something like this:

 $.widget( "custom.catcomplete", $.ui.autocomplete, { _create: function() { this._super(); this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" ); }, _renderMenu: function( ul, items ) { var that = this; $.each(items, function(key, value) { ul.append( "<li class='ui-autocomplete-category'>" + key + "</li>" ); $.each( items, function( index, item ) { var li = that._renderItemData( ul, item ); }); } } }); 

I do not test it. This is just an idea.