格式化jQuery自动完成结果的数据

时间:2009-05-29 19:40:17

标签: jquery asp.net-mvc autocomplete

我有一些我正在格式化的数据:

 // ... imagine populating a SqlDataReader with some results ...
 var results = new StringBuilder();
 while (reader.Read())
 {
     results.AppendFormat("{0}, {1}\n", reader["name"], reader["emailAddress"]);
 }
 return results.ToString();

我的控制器操作非常简单:

 public ActionResult Find(string q)
 {
     var users = Customer.Search(q);
     return Content(users);
 }

我在视图中的javascript看起来像这样:

 $(document).ready(function() {
     $("input#user").autocomplete('<%= Url.Action("Find", "Customer") %>', {
         minChars: 2,
         width: 500,
         matchContains: true,
         autoFill: false,
         formatItem: function(row, i, max) {
             return i + "/" + max + ": (" + row[0] + ") " + row[1];
         },

         formatMatch: function(row, i, max) {
             return row[0];
         },

         formatResult: function(row) {
             return row[1];
         }
      });
    });

问题A

我正在使用Autocomplete from here。此时我遇到了一个问题,我无法将这两个字段作为单独的值读取。例如,如果行名称字段是“John”并且其电子邮件字段“john@doe.com”,我希望它们分别显示在行[0]和行1中。但是,他们目前在行[0]中得到“John,john @ doe.com”,行1未定义。

我需要更改(在javascript或我正在构建字符串的方法中)以获取row [0]和行1以显示正确的数据?

问题B

我更希望将数据放在名为的行中。我的意思是:

 formatItem: function(row, i, max) {
     return i + "/" + max + ": (" + row.name + ") " + row.email;

我挣扎了一段时间来格式化我的数据,所以这会发生,但我从未成功过。我如何格式化我的数据,以便AutoComplete能理解这一点?

1 个答案:

答案 0 :(得分:2)

如果您创建一个具有名称和电子邮件属性的类的结果列表,然后将其作为JSON返回,那么我认为它将按照您希望的方式工作。

中级班

public class AutocompleteResult
{
    public string Name { get; set; }
    public string Email { get; set; }
}

搜索代码:

var results = new List<AutocompleteResult>();
while (reader.Read())
{
    results.Add( new AutocompleteResult
                     {
                         Name = reader["name"],
                         Email = reader["email"]
                     });
}
return results;

动作:

public ActionResult Find(string q)
{
    var users = Customer.Search(q);
    return Json(users);
}

查看:

我认为......关键的区别在于解析方法和dataType,你可能需要调整解析方法等。人。使格式正确。你可能可以摆脱formatResult / formatMatch,但我不确定。我不使用这些,因为我记得我在解析时正在做的正确设置值。我正在努力保留你的基本代码,但正如我所说,我没有使用你所做的所有方法,也没有深入探讨它们。

$(document).ready(function() {
    $("input#user").autocomplete('<%= Url.Action("Find", "Customer") %>', {
        dataType: 'json',
        minChars: 2,
        width: 500,
        matchContains: true,
        autoFill: false,
        parse: function(data) {
           var array = new Array();
           for (var i = 0; i < data.length; ++i) {
              var datum = data[i];
              array[array.length] = {
                          data: datum,
                          value: datum.Name,
                          result: dataum.Email
              };
           }
        }
        formatItem: function(data, i, max) {
            return i + "/" + max + ": (" + data.Name + ") " + data.Email;
        },
        formatMatch: function(data, i, max) {
            return data.Name;
        },
        formatResult: function(data) {
            return data.Email;
        }
     });
});