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

jquery autocomplete select

Question

Usar JQuery Autocompletar en un formulario HTML tradicional.

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

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

He intentado algunos ejemplos SO, pero no pude hacer que funcionaran.

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

Answer 1

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

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

Answer 2

No pude comentar la respuesta por @handsofaten, así que añadiré su respuesta aquí. Puede tener más sentido usar el valor en lugar de la 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(); }
});

Answer 3

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 de change no funcionaba, pero las devoluciones de llamada close y select sí. Usar select es mejor, ya que close también se invocará 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 la devolución de llamada selectiva, 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 que el formulario está enviado. 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). La vuelta que parece funcionar es:

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

Answer 4

  select: function( event, ui ) {

          if(ui.item){

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

    }

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

                  });

Answer 5

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

El campo SearchField 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