jquery - 如何覆盖 jquery 自动完成的菜单项？

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自动完成的方法。它为小部件提供了更大的灵活性。

这是该方法的一个很好的复杂用法

Answer 3

jQuery Autocomplete - 自定义数据和显示

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