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

Question

我有一些数据，我的格式是这样的：

// ... 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]; 
     } 
     }); 
    }); 

质疑

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

我需要改变什么（无论是在JavaScript中还是在构建字符串的方法中）以获取行[0]和行1以显示正确的数据？

问题B

我宁愿在指定行中的数据。通过这个我的意思是：

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

我挣扎了一段时间来格式化我的数据，所以这会发生，但我从来没有成功。我如何格式化数据，以便AutoComplete能够理解这一点？

Answer 1

如果您使用Name和Email属性创建一个类的结果列表，然后将其作为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; 
     } 
    }); 
});