Автозаполнение jQueryUI + ASP .NET MVC с данными json

У меня действительно большая проблема с вызовом JSON с автозаполнением jQueryUI. У меня есть довольно простой JS:

$(document).ready(function() {
    $('#Editor_Tags').autocomplete({
        source: "/Forums/Ajax/GetTags",
        focus: function () {
            // prevent value inserted on focus
            return false;
        },
        select: function (event, ui) {
            var terms = split(this.value);
            // remove the current input
            terms.pop();
            // add the selected item
            terms.push(ui.TagName);
            // add placeholder to get the comma-and-space at the end
            terms.push("");
            this.value = terms.join(", ");
            return false;
        }
    });
});

И это модель, которую я пытаюсь вернуть:

public class TagView
{
    public int TagId { get; set; }
    public string TagName { get; set; }
    public int Weight { get; set; }
}

Но это не главная проблема. Основная проблема в том, что когда я начинаю печатать, jQuery не делает запрос к контроллеру. Я на 100% уверен, что указанный URL правильный. Потому что я могу вручную получить доступ к контроллеру, набрав /Forums/Ajax/GetTags?term=text, и я получаю для этого результаты. Я использую новую версию jQuery и jQUI непосредственно из Google CDN.


autocomplete asp.net-mvc jquery-ui jquery-ui-autocomplete getjson
person Łukasz Baran    schedule 02.07.2011    source источник
comment
@Lukasz Baran: Вы видите какие-либо ошибки JavaScript на странице? Что происходит, когда вы открываете вкладку console в Firebug? Отправляется ли вообще какой-либо запрос?   -  person Andrew Whitaker    schedule 02.07.2011
comment
в консоли firebug он выглядит нормально и запрашивает данные для извлечения, но, с другой стороны, в Fiddler я не получаю никакого результата для вызова ajax.   -  person Łukasz Baran    schedule 02.07.2011

Ответы (2)


arrow_upward
5
arrow_downward

Виджет автозаполнения jQueryUI ожидает, что данные в параметре source будут соответствовать следующим требованиям:

[..] простой массив строк или он содержит объекты для каждого элемента в массиве либо со свойством метки, либо со значением, либо с обоими.

Итак, у вас есть два варианта:

  1. Измените модель представления, которую вы сериализуете, на JSON, чтобы соответствовать этим требованиям:

    public class TagView
{
    public string Label { get; set; }
    public string Value { get; set; }
}

  2. Измените параметр source виджета автозаполнения на функцию, в которой вы сами выполняете вызов AJAX и соответствующим образом форматируете данные:

    $("#Editor_Tags").autocomplete({
    source: function (request, response) {
        $.getJSON("/Forums/Ajax/GetTags", { term: request.term }, function (data) {
            response($.map(data, function (el) {
                return {
                    label: el.TagName,
                    value: el.TagId
                };
            }));
        });
    },
    /* other autocomplete options */
});

    Предполагается, что данные, возвращаемые сервером, представляют собой массив JSON из TagView объектов.

Второй фрагмент кода не тестировался, но, по крайней мере, он должен привести вас в правильном направлении.

person Andrew Whitaker    schedule 02.07.2011

arrow_upward
0
arrow_downward

У меня работает с этим кодом:

    $('#Editor_Tags').autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "/Forums/Ajax/GetTags",
            dataType: "json",
            data: {
                term: request.term
            },
            success: function (data) {
                response($.map(data, function (item) {
                    return {
                        label: item.TagName,
                        value: item.TagName
                    }
                }));
            }
        });
    }

});

Что, по сути, не так уж отличается от того, что опубликовал Эндрю.

person Łukasz Baran    schedule 02.07.2011