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…

Accepted Answer

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

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

Solution

Problem