javascript - Controlling the display of selected item using jQueryUI Autocomplete widget -

i'm using jqueryui autocomplete widget data json web service. similar example below:

<script> $(function() {     $( "#city" ).autocomplete({         source: function( request, response ) {             $.ajax({                 url: "http://ws.geonames.org/searchjson",                 datatype: "jsonp",                 data: {                     featureclass: "p",                     style: "full",                     maxrows: 12,                     name_startswith: request.term                 },                 success: function( data ) {                     response( $.map( data.geonames, function( item ) {                         return {                             label: item.name + (item.adminname1 ? ", " + item.adminname1 : "") + ", " + item.countryname,                             value: item.id                         }                     }));                 }             });         },         minlength: 2     }); }); </script> 

my question how can control put input box (#city) when selected list. @ moment autocomplete works , give list of labels. when select 1 of list items puts value input. in case id want use want input display label data rather value data.

well have make value same label. in case this:

success: function( data ) {    response( $.map( data.geonames, function( item ) {       return {          label: item.name + (item.adminname1 ? ", " + item.adminname1 : "") + ", " + item.countryname,          value: item.name + (item.adminname1 ? ", " + item.adminname1 : "") + ", " + item.countryname,       }     })); } 

my guess need value other purposes. have had same situation, , depending on requirements there couple of options.

you have hidden field, in can store value when options selected.

this how look:

$(function() {     $( "#city" ).autocomplete({         source: function( request, response ) {             $.ajax({                 url: "http://ws.geonames.org/searchjson",                 datatype: "jsonp",                 data: {                     featureclass: "p",                     style: "full",                     maxrows: 12,                     name_startswith: request.term                 },                 success: function( data ) {                     response( $.map( data.geonames, function( item ) {                         return {                             label: item.name + (item.adminname1 ? ", " + item.adminname1 : "") + ", " + item.countryname,                             value: item.id,                             source: item                         }                     }));                 }             });         },         minlength: 2,         change: function(event, ui) {            if (ui.item) {               $('#your_hidden_input').val(ui.item.source.id);               $(this).val(ui.item.value);            }         }     }); });