在jQuery UI自动完成中呈现多个列表

Question

我正在尝试构建涵盖多个对象/模型的网站搜索,我想使用jQuery Autocomplete来动态显示数据.问题是,我想传递三个json列表而不是一个,并显示三个列表(<ul></ul>),而不是一个.我通过传递包含json列表的dict来做到这一点source,但我不知道如何分别覆盖每个dict条目.我想,我必须使用_renderMenu和_renderItem,但我无法弄清楚如何.

提前致谢.

编辑

我可以按照自己的意愿操纵数据; 现在我有:

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

我希望它像:

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

Answer 1

根据 jQuery 的例子，你应该这样做：

$.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 );
            }); 
        }
    }
});

我不测试它。这只是一个想法。