JQuery autocomplete: как принудительно выбирать из списка (клавиатура)

Я использую автозаполнение JQuery UI. Все работает так, как ожидалось, но когда я переключаюсь с помощью клавиш вверх/вниз на клавиатуре, я замечаю, что текстовое поле заполнено элементами в списке, как ожидалось, но когда я дойду до конца списка и нажму стрелку вниз еще один время, исходный термин, который я напечатал, появляется, что в основном позволяет пользователю отправить эту запись.

Мой вопрос: есть ли простой способ ограничить выбор элементов в списке и удалить текст на входе с клавиатуры?

Например: если у меня есть список, содержащий {'Apples (AA)', 'Oranges (AAA)', 'Carrots (A)'}, если пользователь наберет "приложение", я автоматически выберу первый элемент в списке ( "Яблоки (AA)" здесь), но если пользователь нажмет вниз, "приложение" снова появляется в текстовом поле. Как я могу предотвратить это?

Спасибо.

Ответ 1

для выбора силы вы можете использовать "изменить" событие Автозаполнения

        var availableTags = [
            "ActionScript",
            "AppleScript"
        ];
        $("#tags").autocomplete({
            source: availableTags,
            change: function (event, ui) {
                if(!ui.item){
                    //http://api.jqueryui.com/autocomplete/#event-change -
                    // The item selected from the menu, if any. Otherwise the property is null
                    //so clear the item for force selection
                    $("#tags").val("");
                }

            }

        });

Ответ 2

Оба этих ответа в комбинации работают хорошо.

Кроме того, вы можете использовать event.target для очистки текста. Это помогает при добавлении автозаполнения к нескольким элементам управления или когда вы не хотите дважды вводить селектор (там есть проблемы с технико-экономическим обеспечением).

$(".category").autocomplete({
    source: availableTags,
    change: function (event, ui) {
        if(!ui.item){
            $(event.target).val("");
        }
    }, 
    focus: function (event, ui) {
        return false;
    }
});

Следует отметить, однако, что даже если "focus" возвращает false, клавиши вверх/вниз по-прежнему будут выбирать значение. Отмена этого события отменяет замену текста. Таким образом, "j", "вниз", "вкладка" по-прежнему будет выбирать первый элемент, который соответствует "j". Он просто не покажет его в элементе управления.

Ответ 3

"Before focus is moved to an item (not selecting), ui.item refers to the focused item. The default action of focus is to replace the text field value with the value of the focused item, though only if the focus event was triggered by a keyboard interaction. Canceling this event prevents the value from being updated, but does not prevent the menu item from being focused."

ссылка

На фокусном мероприятии:

focus: function(e, ui) {
    return false;
}

Ответ 4

Определите переменную

var inFocus = false;

Добавьте на свой вклад следующие события

.on('focus', function() {
    inFocus = true;
})
.on('blur', function() {
    inFocus = false;
})

И присоедините событие keydown к окну

$(window)
    .keydown(function(e){
        if(e.keyCode == 13 && inFocus) {
            e.preventDefault();
        }
    });