JQuery UI Autocomplete - How to select an item and mantain the label (not the value) in the input text

Question

I´m trying to use the JQuery UI Autocomplete plugin (click to see the demo page of JQuery UI Autocomplete plugin)

I´m using as datasource a list of objects as bellow:

Answer 1

Change your autocomplete call to the following:

$("#txtCidade").autocomplete({
    source: availableTags,
    select: function(event, ui) {
         $("#hidCidade").val(ui.item.label);
    }
});​

#txtCidade should automatically pckup the selected label when an autocomplete item is clicked on.

See a jsFiddle example here.