如何覆盖jquery autocomplete的menuitem?

时间:2013-08-16 10:58:43

标签: jquery jquery-autocomplete

我正在使用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);
                    }
                });
            ...

有什么建议吗?

3 个答案:

答案 0 :(得分: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);
        };

答案 1 :(得分:0)

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

Here is a nice complex use of the method

答案 2 :(得分:0)

jQuery Autocomplete - Custom data and display

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