Результаты автозаполнения JQuery не отображаются - PullRequest
1 голос
/ 15 декабря 2010

Я создаю поле автозаполнения в ASP.net MVC 2. Проблема заключается в том, что поле ввода просто вращается, и данные автозаполнения или сообщения «без результатов» не отображаются.

У меня есть контроллер поиска, который извлекает LastNames из базы данных, используя инструкцию LIKE. Этот контроллер вызывается из функции JavaScript ниже:

 $('#author').autocomplete('~/edit/search.mvc', {
    delay: 200,
    minChars: 2
});

Это все отлично работает. Я могу отлаживать в контроллере поиска, и он передает текст поиска (q) и извлекает результаты вплоть до оператора return. Контроллер ниже.

//Method to return author searches
public JsonResult Search(string q)
{
    var locateFacultyDto = new LocateFacultyMemberDto() { SearchText = q };
    var result = _facultyMemberModel.LocateFacilityMembersByLastNameLike(locateFacultyDto, 10);

    var lastNames = new List<string>();

    foreach (var facultyMember in result.FacultyMembers)
    {
        lastNames.Add(facultyMember.LastName);
    }


    return Json(lastNames, JsonRequestBehavior.AllowGet);
}

Но тогда на странице HTML (Spark) результаты не отображаются. У меня действительно простой ввод текста:

 <input id="author" type="text" />

Есть идеи? Я не могу отлаживать дальше, чем конец контроллера поиска, но до этого момента все было нормально.

Ответы [ 2 ]

1 голос
/ 15 декабря 2010

ОК, я понял это благодаря следующему посту и комментариям выше:

http://blogs.msdn.com/b/joecar/archive/2009/01/08/autocomplete-with-asp-net-mvc-and-jquery.aspx

Публикация полученного кода на случай, если он кому-то поможет.

Javascript : Вызывает метод «Поиск» в контроллере «Редактирование» (подробности ниже).Добавление функции «Parse» было ключом, что объясняется в приведенной выше ссылке:

Хитрость заключается в том, чтобы преобразовать эти данные в формат, ожидаемый функцией автозаполнения.Если вы используете локальные данные, автозаполнение ожидает массив строк.Поскольку наши данные представлены в форме объекта JSON, мы будем использовать опцию parse для форматирования нашего объекта JSON в данные, с которыми может работать функция автозаполнения.

Функция анализа не очень хорошо документирована, но в основном онавозьмем наш объект JSON и вернем массив объектов, состоящий из трех обязательных частей:

  1. данные: это целый элемент в моем объекте JSON: {"ID": 13, "Имя ":" test3 "," Count ": 1}

  2. значение: это значение, которое я хочу отобразить: test3

  3. результат:это значение, которое я хочу добавить к своему вводу (txtStoryTags) после выбора тега из выпадающего списка: test3

Полная функция Javascript:

$('#author').autocomplete('~/edit/search.mvc', {
    dataType: 'json',
    parse: function(data) {
      var rows = new Array();
      for (var i = 0; i < data.length; i++) {
        rows[i] = {data: data[i], value: data[i].Name, result: data[i].Id };
     }
      return rows;
  },
  formatItem: function(row) {
     return row.Name;
  },
 delay: 40,
 autofill: true,
 selectFirst: false,
 highlight: false,
 minChars: 2
});

Контроллер ASP.net MVC 2:

    //Method to return author search results as JSON
    public JsonResult Search(string q) //autocomplete passes a variable 'q' containing the search text
    {
        var locateFacultyDto = new LocateFacultyMemberDto() { SearchText = q };
        var authors = _facultyMemberModel.LocateFacilityMembersByLastNameLike(locateFacultyDto, 10);

        var results = new List<Object>();  //All we need is the name and ID
        //anonymnous object for JSON result.  
        foreach (var author in authors.FacultyMembers)
        {
            results.Add(new
            {
                Name = (author.LastName + ", " + author.FirstNames), 
                Id = author.Id
            });
        }

Альт!Автозаполнение перечисляет имена пользователей в результатах поиска, и при выборе имени вставляет идентификатор в поле, которое просто:

 <input id="author" type="text" />

Спасибо всем!

1 голос
/ 15 декабря 2010

Я бы предложил использовать firebug в firefox, чтобы посмотреть, каков реальный ответ.

...