Извлечение поисковых данных из базы данных с помощью автозаполнения jQuery? - PullRequest
Новая
       7

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

0 голосов
/ 05 января 2012

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

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

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

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

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

Обновление:

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

                $('#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
                                    }
                                }));
                            }
                        });
                    }
                });

Ответы [ 2 ]

2 голосов
/ 05 января 2012

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

например 

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

    return Json(contacts.ToArray(), JsonRequestBehavior.AllowGet);
}
1 голос
/ 05 января 2012

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

  1. вам не нужна часть "? Firstname =" в URL, поскольку вы используете параметр data для запроса ajax.

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