Jquery UI Autocomplete showing ID

Question

I'm using jquery UI for showing my autocomplete. when i type it works fine until i realize something buggy:

When i type and the data list show up, i press arrow key on my keyboard (up or down arrow) and on the textbox show up the ID, not the label.

$("#artwork").autocomplete({
    source: "{!! route('admin.theme.getart') !!}",
    select: function (event, ui) {
        event.preventDefault();
        this.value = ui.item.label;
        $("[name='artwork_id']").val(ui.item.value);
    }
});

how to fixing this bug?

Answer 1

I add focus condition at autocomplete

focus: function (event, ui) {
    event.preventDefault();
    this.value = ui.item.label;
    $("[name='artwork_id']").val(ui.item.value);
}