jQuery UI Autocompletar: ¿Desactiva la finalización de la pestaña?

Question

reference

¿Cómo puedo desactivar el uso de la tecla Tab para seleccionar el elemento actual/resaltado? Solo quiero Ingrese para llenarlo.

Answer 1

Ryan's example de poner la cancelación en caso keypress no funcionó para mí, pero podemos ponerlo en la opción de autocompletar select:

select: function(e, ui) { 
    if(e.keyCode === 9) return false; 
    // other code... 
} 

Answer 2

El tabulador no selecciona realmente el elemento actual, sino que mueve el cursor al siguiente elemento que se puede tabular. Así que lo que hay que hacer es desactivar la pestaña para la función de autocompletar:

Lock tab key with javascript?

Algo como esto está funcionando para mí, es posible que tenga que modificar un poco más.

http://jsfiddle.net/Uubn6/

Básicamente, se captura el evento KeyDown antes de pasarlo al manejador de autocompletar keydown. Cuando lo captura, puede hacer lo que quiera (pasarlo o no).

Answer 3

Cuando utiliza el modificador .autocomplete() en jquery-ui, establece el controlador de teclas para su cuadro de texto de entrada de la siguiente manera. El self.menu.select establece el cuadro de texto con el valor actualmente resaltado en la lista de auto-completar

.bind("keydown.autocomplete", function(event) { 
... 
switch(event.keyCode) { 
... 
case keyCode.TAB: 
    if (!self.menu.active) { 
     return; 
    } 
    self.menu.select(event); 
    break; 
... 
    } 
} 

Así que lo que hay que hacer es asegurarse de que este controlador no recibe llamada. Pude hacer esto agregando un controlador a la tecla que devuelve falso del manejador si la pulsación de tecla es TAB.

$("#tags").autocomplete({ 
     source: availableTags 
    }); 
$("#tags").keypress(function(e){ 
    if(e.keyCode == keyCode.TAB) { 
     e.stopImmediatePropagation(); 
    } 
}); 

You can see the result here.