Форматирование данных для результатов автозаполнения 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];
         }
      });
    });

Вопрос A

Я использую Автозаполнение отсюда . В этот момент у меня возникла проблема, когда я не могу получить два поля для чтения в виде отдельных значений. Например, если поле имени строки - «Джон», а его поле электронной почты - «john@doe.com», я ожидаю, что они будут отображаться в строке [0] и строке 1 соответственно. Тем не менее, в настоящее время я получаю «John, john@doe.com» в строке [0], а строка 1 не определена.

Что мне нужно изменить (либо в javascript, либо в методе, в котором я строю строку), чтобы получить строку [0] и строку 1 для отображения правильных данных?

Вопрос B

Я бы предпочел, чтобы данные в именованных строках. Под этим я подразумеваю:

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

Я некоторое время пытался отформатировать свои данные, чтобы это произошло, но я никогда не был успешным. Как мне отформатировать мои данные, чтобы автозаполнение это понимало?

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, вам, возможно, придется настроить метод разбора, et. и др. чтобы получить правильное форматирование. Возможно, вы сможете избавиться от 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;
        }
     });
});