自动完成 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 已被弃用，我们应该从服务器本身返回格式化数据。因此，我从服务器返回了格式化数据：

Snippet

 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 自动完成 及其祖先 jQuery 自动完成 混淆。 jQueryUI 自动完成没有 formatItem、formatResult、scroll 或 scrollHeight 选项。

要完成您想要的任务，您需要重写 _renderItem 函数，如本例所示：

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

此外，您的源数据应该是返回数据的函数、数据本身或按以下格式返回数据的 URL

• ：字符串数组：['option1', 'option2'、'option3'] 或
• 具有属性 label 或 value（或两者）的对象数组：[{ label: '选项1'，值：'选项1'}，{...}]

Answer 2

首先，我在 Jquery UI 中没有看到任何 formatItem 或“formatResult”，这是我所做的，并确保您返回 JSON 对象

当使用字符串时，自动完成插件期望该字符串指向将返回 JSON 数据的 URL 资源。它可以位于同一主机或不同主机上（必须提供 JSONP）。请求参数“term”被添加到该 URL http://jqueryui.com /demos/autocomplete/#remote-jsonp

  $("#tagBox").autocomplete({
                source: "@Url.Action("Search", "Person")",//I'm using asp.net MVC here 
                select: function (event, ui) {
                    $(this).val( ui.item.Name );

                    return false;
                }
            }).data("autocomplete")._renderItem = function (ul, item) {
                var term=$(#tagBox).val();
                return $("<li style=\"background-color:Yellow\" ></li>")
                .data("item.autocomplete", item)
                .append("<a>"+ "<img src=/images/ProfileAvatar/ProfileImage.aspx?thumbnailId="+item.ImageId +"'></img>" + item.Name.replace(new RegExp('(' + item.Term + ')', 'gi'), "<b>$1</b>")  + "</a>").appendTo(ul);
            };

和我的控制器代码，

 IList<Person> people= new List<Person>();
// people.Add() here
 return Json(people);

和我的 person 类，

public class Person 
    {
        public int Id{ get; set; }
        public string Name { get; set; }

        public int ImageId 
        {
            get; 
            set;
        }
}