Устранение неполадок jQuery-UI Autocomplete with Remote Datasource

Question

Я пытаюсь получить виджет 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?

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

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

Answer 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 для вывода другой формат!

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

List<string> s = new List<string>(); 
//populate the list 
return new JavaScriptSerializer().Serialize(s);