Сложная структура json
 

Здравствуйте! Возник следующий вопрос.
Необходимо с помощью json сделать автозаполнение поля input.
json имеет следующий вид:

{"abc":
{"sr":"ok","citi":[
{"id":"c2","value":"Киев"},{...}...,{...}]}}

При этом в зависимости от выбранного value необходимо запомнить id, который потом участвует в расчетах.
А вопрос в том как разобрать эту сложную структуру. Я пишу:

javascript code
$('#field').auticomplite({
source:... и тут я застрял
})

Подскажите пожалуйста как можно разобрать эту структуру, или где посмотреть.

chelleg,
http://api.jqueryui.com/autocomplete/#option-source
javascript code

$('#field').auticomplite({
source:data.citi
})

И все-равно не понятно. Как использовать data.
Вот такая штука:

$("#test").html(data.abc.citi[0].value)

выводит первое значение.
Но что прописать в параметрах autocomplite data: я не могу понять из-за множества вложенных объектов.
Может и туплю, но в мануале ответа не нашел.

chelleg,
http://javascript.ru/forum/showthread.php?p=393585
смотрите пример тут -- строки 27 - 34 вам ненужны - строка 36 вместо data будет data.abc.citi
строки 39 и 40 соответствено item.id и item.value

Спасибо! Заработало!
Но остался последний косяк - почему-то не подтягиваются данные, если я начинаю вводить название показывается список из всех городов.
В качестве эксперимента в sourse написал так:

source: [ "Кот", "кит", "стол", "стул", "слон"]

С таким массивом работает нормально.

chelleg,
если то что вводят нет в списке, наверно поэтому весь список и показывают? можно только гадать

Почему-то неправильно подтягивается. Даже если я ввел полностью название города (например Москва), весь список отображается внизу в алфавитном порядке, из него не убираются неподходящие варианты. А с проверочным массивом работает нормально.

chelleg,
нужен живой макет

Вот код
https://jsfiddle.net/jndr0frz/11/

Вот только там он не работает
Выложил сюда для наглядности:
http://spacesolarsystem.esy.es/auto/calculation.html