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; 
     } 
    }); 
});