Автозаполнение jQuery UI показывает значение вместо метки в поле ввода

Потенциально простая проблема с автозаполнением jQuery UI превзошла меня. Мой источник

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

Я вызываю виджет с

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

Все работает отлично. Когда я ввожу в поле ввода #search, соответствующая метка отображается в раскрывающемся списке, а когда я select выполняется правильный поиск. Виджет даже показывает label в поле ввода #search, поскольку я выбираю разные элементы в раскрывающемся меню, используя клавиши со стрелками (или мышь). За исключением того, что, как только я нажму "Enter", виджет заполнит поле ввода #search с помощью value вместо label. Поэтому поле показывает One-Thing вместо One Thing.

Как я могу это исправить? Наверняка, что я ожидаю, это более разумное поведение, не?

Ответ 1

если вы хотите, чтобы метка была вашим значением, просто укажите источник

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

альтернативно, метод select действия автозаполнения по умолчанию состоит в том, чтобы поместить объект value (если указан) в качестве значения вашего ввода. вы также можете поместить event.preventDefault() в функцию выбора, и он поместит метку в качестве значения (как у вас)

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

Ответ 2

Если вы хотите, чтобы ваш ярлык был вашим значением в текстовом поле onFocus AND onSelect, используйте этот код:

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

Мне не хватает события onFocus (только установка события onSelect). Таким образом, значение продолжало отображаться в текстовом вводе.

Ответ 3

У меня все еще была проблема с клавишами со стрелками, показывающими значения. Поэтому я действительно счел, что лучше назначить значение и метку метке, а затем поместить значение на третье свойство данных. Например, поставьте его на id.

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

Затем, когда вы используете событие select, вы можете получить id из ui:

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