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

Question

我正在尝试构建涵盖多个对象/模型的网站搜索，我想使用 jQuery Autocomplete 来动态显示数据。问题是，我想传递三个 json 列表而不是一个，并显示三个列表 ( <ul></ul> )，而不是一个。我通过将包含 json 列表的字典作为 source 传递来做到这一点，但我不知道如何分别覆盖每个字典条目。我想我必须使用 _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 );
            }); 
        }
    }
});

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