Извлечение данных поиска из базы данных с использованием jQuery autocomplete?

Question

Я использую плагин jQuery UI Autocomplete для лучшего ввода данных в моем веб-приложении ASP.NET.

http://jqueryui.com/demos/autocomplete/

Однако, я думаю, что я как-то потерял в этом плагине. Я хотел бы спросить, что я должен сделать, чтобы использовать эту функцию автозаполнения с данными, полученными из базы данных?

Я ожидаю, что Ajax следует использовать для поиска в реальном времени, , но я понятия не имею, как это можно сделать, посмотрев демоверсию на веб-сайте выше.

Большое спасибо.

Update:

Вот код, который я попробовал, не работает, но не ошибка в поджигатель тоже.

   $('#FirstName').autocomplete({ 
        source: function (request, response) { 
         $.ajax({ 
          url: "/Contact/FirstNameLookup?firstName=", 
          type: "POST", 
          data: { 
           "firstName": $('#FirstName').val() 
          }, 
          success: function (data) { 
           response($.map(data, function (item) { 
            return { 
             label: item.FirstName, 
             value: item.FistName 
            } 
           })); 
          } 
         }); 
        } 
       }); 

Answer 1

Вы должны создать действие, которое выполняет поиск и возвращает результат в виде JsonResult

например

public ActionResult FirstNameLookup(string firstName) 
{ 
    var contacts = FindContacts(firstname); 

    return Json(contacts.ToArray(), JsonRequestBehavior.AllowGet); 
} 

Answer 2

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

1. вам не нужно «? ПгвЬЫат =» часть URL, так как вы используете параметр данных для вас АЯКСА запроса.

2. вместо того, чтобы захватывать поисковый запрос с помощью $ ('# FirstName'). Val(), попробуйте использовать свойство term объекта запроса (request.term).

, например:

$('#FirstName').autocomplete({ 
       source: function (request, response) { 
        $.ajax({ 
         url: "/Contact/FirstNameLookup", 
         type: "POST", 
         data: { 
          "firstName": request.term 
         }, 
         success: function (data) { 
          response($.map(data, function (item) { 
           return { 
            label: item.FirstName, 
            value: item.FistName 
           } 
          })); 
         } 
        }); 
       } 
      });