Jquery Autocomplete key press down display label name rather than value?

Question

Is there a way you can force jQueryUI autocomplete to display data label rather than data value:

For example

[{"label":"name","value":"1"},{"label":"name3","value":"6"},{"label":"name1","value":"8"},{"label":"name2","value":"10"}]

$( ".auto-search" ).autocomplete({
    minLength: 2,
    dataType: 'json',
    source: tempJson,
    focus: function(event, ui){
        $('input[name="user-name"]').val(ui.item.label);
    },
    select: function (event,ui){
        $('input[name="user-name"]').val(ui.item.label);
        $('input[name="user-id"]').val(ui.item.value);
        return false;
    }
})

The above code, when you press the down button, displays the value rather than the label. Can it be changed to show the label?

Answer 1

Make sure to return false or prevent the default action of the event from your focus event handler:

focus: function(event, ui){
    event.preventDefault();
    $('input[name="user-name"]').val(ui.item.label);
},