jQuery UI autocomplete shows value instead of label in the input field

Question

A potentially simple issue with jQuery UI autocomplete is stumping me. My source is

var ac = [
    {
        label: "One Thing",
        value: "One-Thing"
    },
    {
        label: "Two Thing",
        value: "Two-Thing"
    },      
]

I am invoking the widget with

$(function() {
    $( "#search" ).autocomplete({
        source: PK.getAutocompleteSource(),
        focus: function( event, ui ) {
            $("#search").val(ui.item.label);
            return false;  
        },
        select: function( event, ui ) {
            $("#search").val(ui.item.label);
            PK.render(ui.item.value);
        }
    });
});

All works fine. When I type in the #search input field, the matching label shows up in the dropdown, and when I select the correct search is performed. The widget even shows the label in the #search input field as I select different items in the dropdown using the arrow keys (or the mouse). Except, soon as I hit enter, the widget fills the #search input field with the value instead of the label. So the field shows One-Thing instead of One Thing.

How can I correct this? Surely what I am expecting is the more reasonable behavior, no?

Answer 1

if you want the label to be your value, just have the source be

var ac = ["One Thing", "Two Thing"]      

alternatively, the select method of autocompletes default action is to put the value object (if specified) as the value of your input. you could also put event.preventDefault() in the select function and it will put the label as the value (as you have)

select: function( event, ui ) {
        event.preventDefault();
        $("#search").val(ui.item.label);
        PK.render(ui.item.value);
    }

Answer 2

If you want your label to be your value in the text box onFocus AND onSelect use this code:

select: function(event, ui) { 
        $('#hiddenid').val(ui.item.value); 
        event.preventDefault(); 
        $("#search").val(ui.item.label); },

focus: function(event, ui) { 
       event.preventDefault(); 
       $("#search").val(ui.item.label);}

I was missing the onFocus event (only setting the onSelect event). Thus, the value continued to show in the text input.

Answer 3

I was still haveing a problem with arrow keys showing the values. So I actually found it better to assign both the value and label to the label, and then put the value on a 3rd property of the data. For example let's put it on id.

var ac = [
    {
        label: "One Thing",
        value: "One Thing",
        id: "One-Thing",
    },
    {
        label: "Two Thing",
        value: "Two Thing",
        id: "Two-Thing"
    },      
]

Then when you use the select event, you can get id from ui:

select: function( event, ui ) {
    PK.render(ui.item.id);
}