JQuery-UI автозаполнение, манипулировать JSON и Javascript для анализа скрытых полей ввода?

Question

Мы создали форму поиска, используя автозаполнение jquery, и мы хотим немного изменить ее работу.

Хорошо, вот мой ответ json:

[{"id":"Liverpool","postcode":"2170","state":"NSW","value":"Liverpool, NSW (2170)"}]

Вот наш javascript:

$(function() {
    function split( val ) {
        return val.split( /,\s*/ );
    }
    function extractLast( term ) {
        return split(term).pop();
    }

    $( "#suburbs" )
        // don't navigate away from the field on tab when selecting an item
        .bind( "keydown", function( event ) {
            if ( event.keyCode === $.ui.keyCode.TAB &&
                    $( this ).data( "autocomplete" ).menu.active ) {
                event.preventDefault();
            }
        })
        .autocomplete({
            source: function( request, response ) {
                $.getJSON( "http://www.path-to-our-autocomplete.com/search.php", {
                    term: extractLast( request.term )
                }, response );
            },
            search: function() {
                // custom minLength
                var term = extractLast( this.value );
                if ( term.length < 2 ) {
                    return false;
                }
            },
            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.item.value );
                // add placeholder to get the comma-and-space at the end
                terms.push( "" );
                this.value = terms.join( ", " );
                return false;
            }
        });
});

Наш HTML:

<input type="text" id="suburbs" name="suburbs" class="ui-autocomplete-input" role="textbox" aria-autocomplete="list" aria-haspopup="true">
<input type="hidden" id="postcode" name="postcode" value="" />
<input type="hidden" id="state" name="state" value="" />

По сути, мы хотим, чтобы при нажатии на результат поиска он в настоящее время заполняет поле ввода пригородов "Liverpool, NSW (2170)" - так как это значение, которое возвращает json.

Что мы хотим изменить, так это то, что мы хотим, чтобы раскрывающийся список показывал этот результат, но при нажатии мы хотим, чтобы он заполнил поле ввода в пригороде значением json "id" - другими словами, просто заполните ввод в пригороде. с "Ливерпулем".

Мы хотим, чтобы оно заполняло значение почтовых индексов скрытого поля ввода как ссылку jsons на «почтовый индекс» и то же самое для скрытого поля ввода состояний.

Как бы мы манипулировали этим javascript, чтобы сделать это? Мы читали и пробовали в течение нескольких дней, но не смогли ничего найти, поэтому я решил разместить их здесь в стеке.

Спасибо:)

Answer 1

В соответствии с документацией (http://jqueryui.com/demos/autocomplete/):

Локальные данные могут быть простым массивом строк или содержать объекты для каждого элемента в массиве со свойством метки или значения или обоими.Свойство label отображается в меню предложений. Значение будет вставлено в элемент ввода после того, как пользователь выберет что-то из меню. Если указано только одно свойство, оно будет использоваться для обоих, например, если вы предоставляете только значения-свойствазначение также будет использоваться в качестве метки.

Итак: измените свой JSON следующим образом:

[{"value":"Liverpool","postcode":"2170","state":"NSW","label":"Liverpool, NSW (2170)"}];

И выберите функцию следующим образом:

select: function( event, ui ) {
  if (ui.item) {
    $('#postcode').val(ui.item.postcode);
    $('#state').val(ui.item.state);
  }
  else {
    $('#postcode').val('');
    $('#state').val('');
  }
}