2010-07-28 25 views
8

He utilizado el jquery-ui para autocompletar un cuadro de entrada y establecer un valor oculto del elemento seleccionado.jquery-ui autocompletar no selecciona ingrese

Esto lo hice usando la opción

select: function(event, ui) { ...$("#myDiv").val(ui.item.value)... } 

(que puede estar mal ahora, no tienen el código a mano, pero funciona hasta mi pregunta ...)

funciona cuando seleccione un elemento del menú con el mouse; sin embargo, si solo ingreso un texto y elijo un elemento con Enter, no hace nada, es como si la función de autocompletar no ejecutara la selección. Sin embargo, tabular fuera de la caja desencadena la selección.

He utilizado un foco y cambio: para actualizar también los campos que quiero, pero creo que esto es excesivo, si realmente es necesario especificar todo el foco, cambiar y seleccionar, solo para asegurarse de que sin embargo un usuario selecciona un elemento de la lista que realmente se seleccionará.

Gracias.

rofly: Estoy utilizando la función de autocompletar jquery-ui, que tiene el código que da, pero parece que este (de los jquery.ui.autocomplete.js)


case keyCode.ENTER: 
       case keyCode.NUMPAD_ENTER: 
        // when menu is open or has focus 
        if (self.menu.active) { 
         event.preventDefault(); 
        } 
        //passthrough - ENTER and TAB both select the current element 
       case keyCode.TAB: 
        if (!self.menu.active) { 
         return; 
        } 
        self.menu.select(event); 
        break; 

Eso se ve todo excelente, así que no estoy seguro si falla debido a esto.

Mi código es así (envuelto en document.read()

$("#someDiv").attr("autocomplete", 'off'); 
$("#someDiv").autocomplete({ 
source: function(request, response) { 
if (request.term in cache) { 
response(cache[ request.term ]); 
return; 
} 
$.ajax({ 
url: "giveMeJSON.jsp", 
dataType: "json", 
data: request, 
success: function(data) { 
cache[ request.term ] = data; 
response(data); 
} 
})}, 
minLength: 1, 
delay: 300, 
select: function(event, ui) { 
$("#someDiv").val(ui.item.label); 
$("#hiddenDiv").val(ui.item.value); 
} 
});

es así, el problema es que esto funciona cuando el usuario está seleccionando en el menú con el ratón y cuando la tabulación fuera del campo (keyUp, keyDown para elegir y luego tab out, funciona) pero keyUp, keyDown para elegir itme, luego intro, y no pasa nada!

+0

Si define una entrada oculta que tiene un identificador raro '' myDiv' .... tal cambio: function (event, ui) {... $ ("# myDiv"). val (ui.item.value) ...} 'funciona – Ties

Respuesta

6

Una instancia similar funciona para mí con jQuery 1.4.2 y jQuery-ui 1.8.7. Una advertencia, "Enter" parece funcionar cuando se selecciona un elemento de la lista. Si está creando una nueva entrada que no existe, presionar "Enter" no activará la selección o cambio de eventos. Indique un manejador de eventos por separado para hacer que esa situación vuele.

+1

Aquí está el código exacto que estoy usando para capturar la tecla Enter. $ ("# YourAutoComplete") pulsación de tecla (function (e) { \t si (e.which == 13) { yourFunction ($ ('# yourAutoComplete') val());.. return false;} \t \t} ¡Espero que ayude! – JeffSea

+0

¡Eche un vistazo a la respuesta de @iamct! ¡El enfoque automático hace que el primer elemento tenga foco, y por lo tanto, la tecla Intro lo selecciona! –

2

Esto funcionó para mí cuando estaba enviando un formulario después de completar automáticamente.

$("input#searchbox").autocomplete({ 
    source: autocomplete, 
    select: function(event, ui) { } 
    $("input#searchbox").val(ui.item.value); 
    $("#searchform").submit(); 
    } 
}) 

De Search on Click with Jquery's Autocomplete

1

tienen este parámetro? establecer
enfoque automático: verdadera

Ver respuesta aquí: https://stackoverflow.com/a/9243511/74585

+1

Esto era exactamente lo que estaba buscando, ¡qué pena que esta no sea la respuesta aceptada! –

Cuestiones relacionadas