plugin - tagify jquery

Autocompletar JQuery: cómo forzar la selección de la lista(teclado)

Question

Estoy usando autocompletar JQuery UI. Todo funciona como se esperaba, pero cuando ciclo con las teclas arriba / abajo en el teclado, noto que el cuadro de texto está lleno de elementos en la lista como se esperaba, pero cuando llego al final de la lista y presiono la flecha hacia abajo uno más tiempo, aparece el término original que escribí, que básicamente permite al usuario enviar esa entrada.

Mi pregunta: ¿Hay alguna manera simple de limitar la selección a los elementos en la lista, y eliminar el texto en la entrada de la selección del teclado?

Ejemplo: si tengo una lista que contiene {''Apples (AA)'', ''Oranges (AAA)'', ''Carrots (A)''} , si el usuario escribe ''aplicación'', seleccionaré automáticamente el primer elemento de la lista (''Apples (AA)'' aquí), pero si el usuario presiona la flecha hacia abajo, ''app'' aparece nuevamente en el cuadro de texto. ¿Cómo puedo prevenir eso?

Gracias.

Answer 1

Ambas otras respuestas en combinación funcionan bien.

Además, puede usar event.target para borrar el texto. Esto ayuda cuando agrega autocompletar a múltiples controles o cuando no desea escribir el selector dos veces (problemas de mantenimiento allí).

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

Sin embargo, debe tenerse en cuenta que aunque el "foco" devuelve falso, las teclas arriba / abajo todavía seleccionarán el valor. La cancelación de este evento solo cancela la sustitución del texto. Por lo tanto, "j", "abajo", "pestaña" todavía seleccionarán el primer elemento que coincida con "j". Simplemente no lo mostrará en el control.

Answer 2

Definir una variable

var inFocus = false; 

Agregue los siguientes eventos a su entrada

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

Y adjunte un evento de pulsación a la ventana

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

Answer 3

para la selección de fuerza, puede usar el evento "cambio" de Autocompletar

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

            }

        });

Answer 4

"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''s 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."

reference

En evento de foco:

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