Question

How can I override default behavior of displaying item label on the input when hovering/focusing on the items results?

Example not working:

JavaScript:

$('#ac').autocomplete({
    source : ["hello", "how", "do", "you", "do"],
    focus: function(event, ui){
         console.log("print")
         $(this).val('my custom label to show in input');    
    }
})

HTML:

<input type="text" id="ac"/>

http://jsfiddle.net/34fSg/14/

Answer 1

Prevent the default action of the event, which is to replace the input’s value with the focused item’s value:

$('#ac').autocomplete({
    source : ["hello", "how", "do", "you", "do"],
    focus: function(event, ui){
         this.value = 'my custom label to show in input';
         event.preventDefault(); // <-----
    }
})

Example: http://jsfiddle.net/4jJyb/