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

Question

$("#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;
        }
    });

我可以正常完成，但由于来自远程调用的自动完成功能，我感到很困惑......:(

我感兴趣的是 c.img 的部分位于<b>标签，它不会呈现为 HTML...

Answer 1

您应该重写私有(private)方法 _renderItem()插件的。
每个要显示的项目都会调用此函数。

第一个参数代表<ul>插件创建的用于显示菜单的元素。第二个参数是当前数据项。

默认情况下，插件生成 <ul>所以在你覆盖的 _renderItem() 中你应该继续做 <li>但你可以在里面放任何东西。

对于你的情况，我会返回一个稍微不同的数组数据对象，它只是为了存储数据，所以最好将所有内容分开:

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

要实现自定义渲染方法，您只需为插件实例重新定义一个新函数即可。这是如何工作的？

• 当您调用$('#myelement').autocomplete()时插件实例化并且

  1. 生成必要的标记等
  2. 将插件实例添加到元素 #myelement作为名为“自动完成”的 jquery 数据
     
     

• 然后可以通过执行 $('#myelement').data('autocomplete'); 来访问插件实例。

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

这给出:

$("#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 );

};