在jQuery UI Autocomplete中呈现多个列表

Question

在jQuery UI Autocomplete中呈现多个列表

javascriptjqueryjquery-autocompletejquery-ui-autocomplete

6

我正在尝试构建网站搜索，覆盖多个对象/模型，并希望使用jQuery自动完成来动态显示数据。问题是，我想传递三个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>

- pawel.ad

请描述您的JSON数据长什么样子以及您希望如何展示它。 - suvroc

@suvroc 添加到问题中 - pawel.ad

为什么要在自动完成建议框中生成3个单独的列表？为什么不合并这个列表并使用https://jqueryui.com/autocomplete/#categories？ - suvroc

@suvroc 因为我需要单独的 ul 来正确地进行样式设置；这是否可能？ - pawel.ad

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- suvroc · 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 );
            }); 
        }
    }
});

我没有测试过它。这只是一个想法。