JQuery Autocompletar: ¿Enviar formulario en la selección?

3 minutos de lectura

avatar de usuario
ILT

Usando JQuery Autocompletar en un formulario HTML tradicional.

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

Pero el cuadro de entrada se completa y luego tengo que presionar “regresar” por segunda vez, o hacer clic en el botón Enviar.

Probé algunos ejemplos de SO, pero no pude hacerlos funcionar.

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

  • 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 código.

    – Natrio

    4 de febrero de 2010 a las 9:43

avatar de usuario
bjudson

ACTUALIZAR: Finalmente descubrí esto, el siguiente código debería ser el truco. Por alguna razón el change la devolución de llamada no funcionaba, pero el close & select las devoluciones de llamada lo hacen. Usando select es mejor, ya que close también se llamará 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 devolución de llamada, que es que, de forma predeterminada (en el código anterior), si recorre el menú desplegable de autocompletar con el teclado y selecciona con la tecla Intro, 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 cambie la entrada, por lo que el valor enviado es solo lo que el usuario escribió (no lo que seleccionó en el menú desplegable de autocompletar). La solución alternativa que parece funcionar es:

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

  • Estoy teniendo el efecto contrario cuando autocompletar está enviando mi formulario, pero no lo quiero, ¿algún consejo?

    – Roberto

    20 de agosto de 2016 a las 17:12

  • En lugar de usar un selector codificado, puede usar $(this) referirse#searchField y $(this).closest('form') por #searchForm como se sugiere en stackoverflow.com/a/10650149/1538221

    – slamora

    26 de febrero de 2019 a las 8:48


No pude comentar sobre la respuesta de @handsofaten, así que agregaré su respuesta aquí. Puede tener más sentido usar valor más bien que etiqueta como en algunos casos, mi caso, la etiqueta no es con 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(); }
});

$( "#searchField" ).result(function(event, data, formatted) {
  $(this).closest("form").submit();
});

El campo de búsqueda ya está poblado con el campo seleccionado, por lo que no es necesario volver a hacerlo en esta función.

Documentación oficial: http://docs.jquery.com/Plugins/Autocomplete/result#handler

Envíe su archivo seleccionado llamando al ID del botón Enviar en este campo, incluso si el código también está en otra página.

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

  select: function( event, ui ) {

          if(ui.item){

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

    }

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

                  });

  • considera dar una explicación a tu respuesta

    – tipo de letra

    16 de diciembre de 2014 a las 11:38

  • considera dar una explicación a tu respuesta

    – tipo de letra

    16 de diciembre de 2014 a las 11:38

¿Ha sido útil esta solución?