2012-07-27 43 views
24

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.Autocompletar JQuery: cómo forzar la selección de la lista (teclado)

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?

por 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 ('Manzanas (AA)' aquí), pero si el usuario presiona abajo flecha, 'aplicación' aparece de nuevo en el cuadro de texto. ¿Cómo puedo prevenir eso?

Gracias.

+0

cada vez que se carga la lista se dispara una evento. Comprueba si solo hay un elemento allí y luego activa un evento de 'clic' en el elemento O selecciona el ítem – Imdad

+0

Siempre estoy seleccionando el primer elemento, pero si ciclo a través de la lista usando el teclado, muestra el texto que está en el cuadro de texto cuando llego al final de la lista. Eso es lo que trato de prevenir; Básicamente, quiero que regrese a la parte superior de la lista. –

+1

'focus: function (event, ui) { return false; } ' – Imdad

Respuesta

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'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 caso de foco:

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

Gracias. Esto evita que la navegación por el teclado llene el cuadro de texto, lo que evita el problema por completo. –

+0

@AliB De nada :) –

+0

Bueno, después de conectar esto, resuelve parte del problema: el cuadro de texto ya no se llena mientras me desplazo con las teclas de flecha, pero aún puedo devolver el texto en el cuadro de texto porque la tecla de abajo tiene un espacio "extra" que quita el foco de la lista. Necesito que permanezca en la lista exclusivamente. ¿Algunas ideas? –

36

para la selección de la fuerza, puede utilizar "change" event 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(""); 
       } 

      } 

     }); 
+0

funciona bastante bien – thepk

+2

El problema con esta solución es que si alguien escribe un valor ilegal en el campo y luego ingresa enter, el formulario se envía con el valor ilegal. Todavía estoy tratando de encontrar una solución elegante. – gitb

+0

Una posible solución es eliminar 'type =" submit "' del formulario y usar jQuery para manejar el evento click en el botón de enviar. Al final, la validación del lado del servidor es lo único en lo que realmente puede confiar. – Sky

9

Ambas otras respuestas en peine la ination funciona bien

Además, puede usar el 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; 
    } 
}); 

Cabe señalar, sin embargo, que el pesar de que el "enfoque" devuelve falso, las teclas arriba/abajo seguirán seleccionar 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.

+0

Funcionó muy bien. ¡Gracias! – ajbraus

+0

Esto funciona principalmente. Estoy usando una fuente AJAX y si el usuario acierta con la pestaña antes de que se carguen las opciones, el cambio no borra los resultados. – danielson317

2

Definir una variable

var inFocus = false; 

Añadir los siguientes eventos a la entrada de

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

y adjuntar un evento keydown a la ventana

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