2010-02-04 40 views
27

Uso de JQuery Autocompletar en un formulario HTML tradicional.JQuery Autocompletar: ¿Enviar formulario en la selección?

Intentando enviar el formulario (a la antigua usanza) cuando se realiza una selección.

Pero el cuadro de entrada se llena y luego tengo que presionar "volver" una segunda vez o hacer clic en el botón Enviar.

He intentado algunos ejemplos de SO, pero no pude conseguir que funcionen.

¿Cómo se envía el formulario automáticamente cuando se realiza la selección?

+0

en resumen: defina una función de devolución de llamada y envíe el formulario en la función de devolución de llamada con javascript. Realmente no sé cómo hacer esto en el código. – Natrium

Respuesta

42

ACTUALIZACIÓN: Finalmente me di cuenta de esto, el siguiente código debería hacer el truco. Por algún motivo, la devolución de llamada change no funcionaba, pero las devoluciones de llamada close & select sí. El uso de select es mejor, ya que también se llamará a close si el campo pierde el foco.

$(function() { 
    $("#searchField").autocomplete({ 
     source: "values.json", 
     select: function(event, ui) { 
      $("#searchForm").submit(); } 
    }); 
}); 

Otra actualización: Ok, también hay un problema con el select de devolución de llamada, que es que por defecto (en el código anterior) si se recorre el autocompletar desplegable con el teclado, y seleccione con el ingreso clave, la entrada se cambia antes de enviar el formulario. Sin embargo, si lo selecciona con el mouse, el formulario se envía justo antes de que se modifique la entrada, por lo que el valor enviado es exactamente lo que escribió el usuario (no lo que seleccionó del menú desplegable de autocompletar). El woraround que parece funcionar es:

$("#searchField").autocomplete({ 
    source: "values.json", 
    minLength: 2, 
    select: function(event, ui) { 
     $("#searchField").val(ui.item.label); 
     $("#searchForm").submit(); } 
}); 
+0

estoy teniendo el efecto opuesto cuando autocompletar está enviando mi formulario, pero no lo quiero ¿algún consejo? – Robert

5

que no podía comentar sobre la respuesta por @handsofaten por lo que se sumará a su respuesta aquí. Puede tener más sentido usar valor en lugar de etiqueta ya que en algunos casos, en mi caso, la etiqueta no es lo que el usuario querría buscar en la base de datos.

$("#searchField").autocomplete({ 
source: "values.json", 
minLength: 2, 
select: function(event, ui) { 
    $("#searchField").val(ui.item.value); 
    $("#searchForm").submit(); } 
}); 
-4
select: function(event, ui) { 

      if(ui.item){ 

      $(event.target).val(ui.item.value); 

    } 

      $(event.target.form).submit(); 

        }); 
+4

considera dar una explicación a tu respuesta – arghtype

0

de enviar su campo elegido llamando el botón Enviar ID en este campo, incluso si el código está en otra página también.

document.getElementById('submit').click(); 
Cuestiones relacionadas