jquery-ui autocomplete, manipulate json & javascript to parse to hidden input fields?

We have created a search form using jquery autocomplete, and we want to modify how it works a little.

Okay, so here is my json response:

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

Here is our 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;
                }
            },
            focu开发者_JS百科s: 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;
            }
        });
});

Our 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="" />

Basically what we want to do, is when the search result is clicked, it currently fills the suburbs input box with "Liverpool, NSW (2170)" - as this is the value which json returns.

What we want to change is, we want the drop down to show this result, but when clicked, we want it to fill the suburbs input field with the json value "id" - in other words, just fill the suburbs input with "Liverpool".

We want it to fill the hidden input box postcodes value as jsons "postcode" reference and the same for states hidden input box.

How would we manipulate this javascript to do this? We have been reading and trying for a few days but haven't managed to get any where, so I decided to post here on stack.

Thank you :)

---

According to the documentation (http://jqueryui.com/demos/autocomplete/):

The local data can be a simple Array of Strings, or it contains Objects for each item in the array, with either a label or value property or both. The label property is displayed in the suggestion menu. The value will be inserted into the input element after the user selected something from the menu. If just one property is specified, it will be used for both, eg. if you provide only value-properties, the value will also be used as the label.

So: modify your JSON like this:

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

And your select function like this:

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