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?

Elva

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);
    }

Unqualified

Thanks, event.preventDefault(); did the trick. Seriously, this should be in the docs. – Elva

@dpp the focus callback (in the original question) returned false, which is another way of skipping the default behavior when using the arrow keys of using the value and not the label. once an item is selected from the list, regardless of how, it calls the select callback and there is where you want to either use preventDefault() or return false to skip the default behavior – Unqualified

got same problem, it display the value instead of label. preventDefault() work!!! – Hankering

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.

Provisional

This didn't work for me because I am also using autofocus:true. The problem is type ahead searching triggers focus event on each keystroke, and the user's typing is aborted every keystroke and replaced with current highlighted item $("#search").val(ui.item.label);. – Kristianson

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);
}

Grown