Устранение неполадок автозаполнения jQuery-UI с удаленным источником данных

0

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

Здесь моя разметка:

<p>
    <label for="birds" class="fieldLabel">Company:</label>
    <input id="existingProgramCompanyName" type="text" style="width: 350px" />
</p>

И вот мой сценарий:

$("#existingProgramCompanyName").autocomplete({
    source: "/Services/ProgramListServices.asmx/FilteredProgramList",
    minLength: 3,
    select: function (event, ui) {
        alert('Got it!');
    }
});

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

{
  "Companies":[{"Id":"1","Value":"First","Label":"First"},
               {"Id":"2","Value":"Second","Label":"Second"},
               {"Id":"3","Value":"Third","Label":"Third"}],
  "HasData":true,"Message":"","Success":true
}

Действительно ли это JSON?

Элемент управления правильно показывает малое анимированное загрузочное изображение. Мой веб-сервис вызывается и возвращается без ошибок. Но элемент автозаполнения никогда не выводит список.

Кто-нибудь видит какие-либо проблемы с тем, что у меня есть до сих пор? И что будет следующим шагом в попытке устранить эту проблему?

  • 0
    Да, это действительный объект JSON (разобранный json).
Теги:
autocomplete
jquery-autocomplete

1 ответ

1
Лучший ответ

Да, ваша строка действительна JSON, но это не значит, что AutoComplete может ее использовать. Форматы можно увидеть в Autocomplete Widget Source. Я думаю, именно это относится к вашему делу для источника:

* An array of strings: [ "Choice1", "Choice2" ]
* An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]

То, что генерирует ваш канал, не будет работать должным образом, независимо от того, окружите его в скобках или нет (вам понадобятся скобки):

$("#existingProgramCompanyName").autocomplete({
    source: {"Companies": [{ "Id": "1", "Value": "First", "Label": "First" },
        { "Id": "2", "Value": "Second", "Label": "Second" },
        { "Id": "3", "Value": "Third", "Label": "Third"}],
        "HasData": true, "Message": "", "Success": true
        }
    });

Тем не менее, эта слегка измененная версия (обратите внимание, что случаи строчные):

 $("#existingProgramCompanyName").autocomplete({
     source: [{ "value": "First", "label": "First" },
              { "value": "Second", "label": "Second" },
              { "value": "Third", "label": "Third"}]
     });

Поэтому, чтобы исправить это, я бы подстроил ваш канал JSON для вывода другого формата!

Обновление: возможно, просто попробуйте параметр массива строк для тестирования:

List<string> s = new List<string>();
//populate the list
return new JavaScriptSerializer().Serialize(s);
Поделиться
  • 0
    Я думаю, что мы говорим о разных вещах здесь. Если для source задано строковое значение, строка представляет URL-адрес, как показано в моем коде разметки. Я говорю о JSON, возвращенном из веб-службы, которую вызывает код автозаполнения.
  • 0
    Да, я понимаю, что ... но если он не может проанализировать его как объект JSON, как показано выше, почему он сможет анализировать тот же объект JSON, передаваемый из вашего URL.
Показать ещё 8 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню