javascript - 未调用自动完成 formatItem， Firebug 中也没有任何错误

Question

基本上我想显示一个图像，除此之外还有文本。这是我的自动完成代码:

 $("#tagBox").autocomplete({
                source: '/Friends/FriendsTagHandler.aspx?FileID=<%=Request.QueryString["FileID"] %>',
                scroll: true,
                scrollHeight: 300,
                formatItem: function (data, i, n, value) {
                    console.log(values);
                    var values = value.split(".");
                    return "<img src='/images/ProfileAvatar/ProfileImage.aspx?AccountID=" + values[0] + "'/> " + values[1];
                },
                formatResult: function (data, value) {
                    console.log(value);
                    return value.split(".")[1];
                }
            });

但是，我的 formatItem 或 formatResult 既没有被调用，也没有在 firebug 控制台中收到任何错误。

更新:我在 SO 本身的某处读到 formatItem 已被弃用，我们应该从服务器本身返回格式化数据。所以我从我的服务器返回格式化数据:

片段

 foreach (var item in friends)
            {
                sb.Append("<img src='/images/ProfileAvatar/ProfileImage.aspx?AccountID=" + item.AccountID.ToString() + "'/>" + item.FirstName + " " + item.LastName).
                        Append(Environment.NewLine);
            }
            //context.Response.ContentType = "text/plain";

            context.Response.Write(sb.ToString());

当我在浏览器中点击 url 时，我可以正确地看到图片和旁边的名称。然而，自动完成框中什么都没有出现。

Answer 1

你得到 jQueryUI autocomplete它的祖先，jQuery autocomplete使困惑。 jQueryUI 自动完成没有 formatItem、formatResult、scroll 或 scrollHeight 选项。

要完成您所追求的目标，您需要覆盖 _renderItem 函数，like in this example :

$("#tagBox").autocomplete({ ... })
    ._renderItem = function (ul, item) {
        // Custom item display logic here.
    };

此外，您的源数据应该是一个返回数据的函数、数据本身，或者是一个以下列格式返回数据的URL:

• 字符串数组:['option1', 'option2', 'option3']，或
• 具有属性 label 或 value(或两者)的对象数组:[{ label: 'option1', value: 'option1'}, { ... }]