jQuery UI AutoComplete не фильтрует ответ от сервера - PullRequest
Новая
       4

jQuery UI AutoComplete не фильтрует ответ от сервера

2 голосов
/ 06 июля 2011

Я использую jQueryUI AutoComplete, но у меня возникла небольшая проблема в том, что фильтрация не выполняется, когда пользователь вводит текст в поле.

В основном получается, что после того, как я набрал 3 символа, выпадающий список автозаполнения заполняет всю коллекцию элементов, возвращаемых с сервера, но выбор не сужается, поскольку набирается больше символов.

Есть идеи, почему это происходит?

Клиент: 

$("#Make").autocomplete({
    minLength: 3,
    source: function (request, response) {
        $.ajax({
            type: "POST",
            url: '@Url.Action("LookupGadgets", "Quote")',
            dataType: "json",
            data: {
                type: $("#Type").val()
            },
            success: function (data) {
                response($.map(data, function (c) {
                    return {
                        label: c.Details,
                        value: c.Details
                    }
                }));
            }
        });
    }
});

Сервер: 

public ActionResult LookupGadgets(string type)
{
    var retValue = gadgetsRepository.AvailableGadgets
        .Where(x => x.Type == type)
        .OrderBy(x => x.Make)
        .Select(r => new { Details = r.Make + " " + r.Model });
    return Json(retValue);
}

1 Ответ

3 голосов
/ 06 июля 2011

Когда вы используете удаленный вариант автозаполнения, виджет ожидает вас , чтобы выполнить фильтрацию.Судя по вашему методу действия, вы просто выбираете элементы из своего хранилища и возвращаете их в виджет, поэтому выпадающий список содержит все результаты.

Если вы хотите использовать удаленные данные, но хотите, чтобы jQueryUI позаботилсяфильтруя (что может быть хорошо в зависимости от размера вашего набора данных), вы можете сначала запросить массив элементов через AJAX, а затем позволить автозаполнению позаботиться обо всем остальном: 

$.ajax({
    type: "POST",
    url: '@Url.Action("LookupGadgets", "Quote")',
    dataType: "json",
    data: {
        type: $("#Type").val()
    },
    success: function (data) {
        var source = $.map(data, function(c) {
            return { label: c.Details, value: c.Details };
        });
        $("#Match").autocomplete({
            source: source,
            minLength: 3
        });
    }
});

Если ваш набор данных большойВы можете избежать этой стратегии и выполнить фильтрацию в действии вашего контроллера.Как эта фильтрация происходит, зависит только от вас;однако, простой способ сделать это - изменить метод действия: 

public ActionResult LookupGadgets(string type, string term)
{
    var retValue = gadgetsRepository.AvailableGadgets
        .Where(x => x.Type == type && x.Make.Contains(term))
        .OrderBy(x => x.Make)
        .Select(r => new { Details = r.Make + " " + r.Model });
    return Json(retValue);
}

И немного изменить свой вызов AJAX: 

$.ajax({
    type: "POST",
    url: '@Url.Action("LookupGadgets", "Quote")',
    dataType: "json",
    data: {
        type: $("#Type").val(),
        term: request.term
    },
    success: function (data) {
        response($.map(data, function (c) {
            return {
                label: c.Details,
                value: c.Details
            }
        }));
    }
});
...