Autocomplete applying value not label to textbox

Question

Im having troubles trying to get the autocomplete to work properly.

It all looks ok to me but....

Answer 1

The default behavior of the select event is to update the input with ui.item.value. This code runs after your event handler.

Simply return false or call event.preventDefault() to prevent this from occurring. I would also recommend doing something similar for the focus event to prevent ui.item.value from being placed in the input as the user hovers over choices:

$("#customer-search").autocomplete({
    /* snip */
    select: function(event, ui) {
        event.preventDefault();
        $("#customer-search").val(ui.item.label);
        $("#selected-customer").val(ui.item.label);
    },
    focus: function(event, ui) {
        event.preventDefault();
        $("#customer-search").val(ui.item.label);
    }
});

Example: http://jsfiddle.net/andrewwhitaker/LCv8L/