Формат JSON для автозаполнения jQuery UI

Question

В документации для jQuery UI Autocomplete говорится, что для свойства source можно задать URL-адрес, который возвращает предлагаемые элементы в формате JSON.Тем не менее, он не уточняет, как должна выглядеть структура этого результата JSON.Кто-нибудь может опубликовать пример?Спасибо!

Answer 1

Перенес ответ сюда из моего комментария:

[{"label":"mylabel","value":"myvalue"},...] 

Я обнаружил, что это тот формат, который ищет .autocomplete для jquery UI 1.8

Answer 2

Это формат JSON

{source: ["Milan", "Turin", "Venice", "Florence", "Rome"] }

или другой источник

{source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]}

Answer 3

с помощью firebug мы можем увидеть этот формат для json

[{"id":"Podiceps nigricollis","label":"Black-necked Grebe","value":"Black-necked Grebe"}]

Я использовал json_encode

$a[$x] = array("id" => $row["id"],"label"=>$row["label"],"value"=>$row["value"]);
}
//echo JSON to page
    $response =  json_encode($a);
echo $response;

Answer 4

Вот пример из реальной жизни, но он использует удаленный источник данных JSONP: http://www.highpoint.edu/admissions/contact.cfm

Поле High School использует автозаполнение (убедитесь, что вы выбрали «Freshman» для типа приема b / c, иначе поле средней школы будет скрыто). Кроме того, изменение выбора страны / штата несколько изменит источник автозаполнения, что может добавить некоторую путаницу.

Кроме того, этот URL является просто оболочкой для iframe с реальной формой, которую я не могу опубликовать, поскольку новые пользователи могут публиковать только один URL в комментарии.

Answer 5

Вы смотрели примеры здесь? http://jqueryui.com/demos/autocomplete/#remote

Answer 6

Я обращаюсь к контроллеру Java Spring, который просто возвращает информацию ниже (в формате JSOn). Я строю это с JSTL. Но я не знаю, какой бэкэнд вы используете. Но на всех языках вы можете просто вывести JSON.

Пример:

{"results":[{"id":" Canned","name":" Canned"}, {"id":64,"name":"Added Sulphites"},
{"id":3,"name":"age"}, {"id":"age","name":"age"}, {"id":59,"name":"age group"},
 {"id":"Allergen","name":"Allergen"}, {"id":85,"name":"Anchovies"}]}

Мне не нравится автозаполнение. может быть, вы нашли лучшее решение во flexbox: http://flexbox.codeplex.com/