Question

我正在使用jquery的自动完成功能：

在标签和值旁边，我想显示一张图片。我将必要的数据作为json发送到java脚本。但我不知道如何覆盖自动生成的菜单项以向其添加<img src=pic_url />。

$("#search").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "/search/" + request.term,
                    type: 'POST',
                    dataType: "json",
                    success: function (data) {
                        response($.map(data.username, function (item) {
                            return {
                                label: item.name,
                                value: item.id,
                                pic_url: item.pic_url
                            };
                        }));
                    },
                    error: function (data) {
                        console.log('e', arguments);
                    }
                });
            ...

有什么建议吗？

Answer 1

您可以通过覆盖_renderItem方法来执行此操作：

$("#search").autocomplete({..}).data("autocomplete")._renderItem = function (ul, item) {
            var html = '<a><div class="list_item_container"><img src="' + item.picture + '" /><span>' + item.label + '</span></div></a>';
            return $("<li></li>")
                .data("item.autocomplete", item)
                .append(html)
                .appendTo(ul);
        };

Answer 2

您想要开始调查自动填充的._renderItem方法。它为窗口小部件提供了更多的灵活性。

Here is a nice complex use of the method

Answer 3

jQuery Autocomplete - Custom data and display

您可以在_renderItem方法中更改模板...请参阅示例中脚本标记底部的部分。

如何覆盖jquery autocomplete的menuitem？

3 个答案: