如何在jquery自动完成脚本中包含图像？

我可以正常完成，但由于远程呼叫自动完成，我感到困惑…：

---

我感兴趣的是c.img在标记中的位置，它不是以HTML呈现的…

您应该覆盖插件的私有方法renderItem。 对要显示的每个项目调用此函数

第一个参数表示插件为显示菜单而创建的元素。第二个参数是当前数据项

默认情况下，插件会生成一个，因此在覆盖的renderItem中，您应该继续生成一个，但您可以在其中包含任何内容

对于您的情况，我将返回一个完全不同的数组数据对象，它只是用来存储数据，所以最好将所有内容分开：

$("#shout_field").live('keydown', function (event) {
        if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) {
            event.preventDefault();
        }
    }).autocomplete({
        minLength: 0,
        source: function (request, response) {
            var term = request.term,
                results = [];
            if (term.indexOf("@") >= 0) {
                term = extractLast(request.term);
                if (term.length >= 2) {
                    $.ajax({
                        type: "POST",
                        url: "/data/people.asp",
                        dataType: "json",
                        data: {
                            term: term
                        },
                        error: function (xhr, textStatus, errorThrown) {
                            alert('Error: ' + xhr.responseText);
                        },
                        success: function (data) {
                            response($.map(data, function (c) {
                                return {
                                    id: c.id,
                                    label: '<b>' + c.img + '</b>' + c.label,
                                    value: c.value
                                }
                            }));
                        }
                    });
                } else {
                    results = ['Type someones name to tag them in the status...'];
                }
            }
            response(results);
        },
        focus: function () {
            // prevent value inserted on focus
            return false;
        },
        select: function (event, ui) {
            var terms = split(this.value);

            // remove the current input
            terms.pop();
            // add the selected item
            terms.push(ui.item.value);
            // add placeholder to get the comma-and-space at the end
            terms.push("");
            this.value = terms.join("");

            $('body').data('tagged', this.value)

            var tagged_users = $("#tagged_users").val();
            $("#tagged_users").val(tagged_users + ui.item.id + ',')

            return false;
        }
    });

要实现自定义呈现方法，只需为插件实例重新定义一个新函数。这是怎么回事

当您调用$'myelement'时，自动完成插件的实例化和

生成必要的标记等 将插件实例作为jquery数据添加到元素myelement中，名称为autocomplete 然后通过执行$'myelement'.data'autocomplete'访问插件实例

然后可以为方法_renderItem定义一个新函数

这使得：

return {
    id: c.id,
    label: c.label,
    imgUrl: c.img,
    value: c.value
}

---

你能把这个放在我上面的代码里让我明白你的意思吗？我理解你的代码我只是不知道如何将它插入我的代码？我有一个关于c.img的问题。该属性包含什么内容？图片的url？我添加了更多的解释。这基本上已经插入到您的代码中。我再清楚不过了。谢谢，伙计，我现在明白了，非常感谢！：

$("#shout_field").autocomplete({
    ...
})
.data('autocomplete')  // get the instance of the plugin
._renderItem = function( ul, item ) {  // change the _renderItem method

    // "item" is the current data item, so { id, label, imgUrl, value }


    return $( "<li></li>" ) // generate a <li> element

            // store the data item (used by the plugin)
            .data( "item.autocomplete", item )

            // create the display you want into the <li>
            .append( '<img src="' + item.imgUrl + '" />' + '<a>' + item.label + '<br>' + item.desc + '</a>' )

            // add the <li> to the list
            .appendTo( ul );

};