Автозаполнение пользовательского интерфейса jQuery: меню не отображается - PullRequest
Новая
       11

Автозаполнение пользовательского интерфейса jQuery: меню не отображается

2 голосов
/ 02 мая 2011

Я пытаюсь использовать виджет автозаполнения, который получает данные из удаленного источника по запросу AJAX.Данные должны поступать как результат JSON метода действия GetDistricts в AddressController.К сожалению, меню не появляется при вводе в текстовое поле.Я проверил ответ в Firebug, и все выглядит хорошо: {"districtNames":["Beirut","Bekaa","Mount Lebanon","South","Nabatieh","North"]}, поэтому я не знаю, что происходит ... Вот мой код jQuery: 

            district.autocomplete({
                minLength: 2,
                source: function (request, response) {
                    $.ajax({
                        type: "GET",
                        url: '@Url.Action("GetDistricts", "Address")',
                        dataType: "json",
                        success: function (data) {
                            response($.map(data, function (item) {
                                return {
                                    label: item.text,
                                    value: item.text
                                }
                            }))
                        }
                    })
                }
            });

А вот мой метод действия: 

    public ActionResult GetDistricts(string term)
    {
        var districts = _service.GetDistricts();
        var districtNames = from c in districts select c.Name;
        return Json(new {districtNames}, JsonRequestBehavior.AllowGet);
    }

PS: я пробовал это с локальными данными, где источником является массив, и он работал просто отлично.Поэтому я не думаю, что это как-то связано с CSS ...

1 Ответ

4 голосов
/ 02 мая 2011

Ваш массив результатов от действия контроллера не в формате, который ожидает виджет. Автозаполнение ожидает массив строк (или массив объектов со свойствами value и label), а не объект с единственным свойством, значение которого является массивом строк.

Вы можете исправить это, обновив действие контроллера: 

public ActionResult GetDistricts(string term)
{
    var districts = _service.GetDistricts();
    var districtNames = from c in districts select c.Name;
    return Json(districtNames, JsonRequestBehavior.AllowGet);
}

Если вы пошли по этому маршруту, вы могли бы даже убрать много вашего $.ajax кода и позволить автозаполнению позаботиться об этом: 

district.autocomplete({
    minLength: 2,
    source: '@Url.Action("GetDistricts", "Address")'
});
<ч />

Или вы можете немного помассировать данные в обратном вызове $.ajax success: 

district.autocomplete({
    minLength: 2,
    source: function (request, response) {
        $.ajax({
            type: "GET",
            url: '@Url.Action("GetDistricts", "Address")',
            dataType: "json",
            success: function (data) {
                response($.map(data.districtNames, function (item) {
                    return {
                        label: item.text,
                        value: item.text
                    }
                }));
            }
        });
    }
});

Примечание , что $.map вызывается с data.districtNames.

...