JQuery Autocomplete : Soumettre le formulaire à la sélection ?

Question

Utilisation de JQuery Autocomplete sur un formulaire HTML traditionnel.

Essayer de soumettre le formulaire (à l'ancienne) lorsqu'une sélection est effectuée.

Mais le champ de saisie est rempli et je dois ensuite appuyer sur "return" une deuxième fois ou cliquer sur le bouton "submit".

J'ai essayé quelques exemples de SO, mais je n'ai pas réussi à les faire fonctionner.

Comment soumettre le formulaire automatiquement lorsque la sélection est faite ?

Answer 1

UPDATE : J'ai finalement trouvé une solution, le code ci-dessous devrait faire l'affaire. Pour une raison quelconque, le change ne fonctionnait pas, mais le close & select les callbacks font. Utilisation de select est préférable, puisque close sera également appelé si le champ perd le focus.

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

UNE AUTRE MISE À JOUR : Ok, il y a aussi un problème avec les select callback, c'est-à-dire que par défaut (dans le code ci-dessus) si vous parcourez la liste déroulante de l'autocomplétion avec le clavier, et que vous sélectionnez avec la touche entrée, l'entrée est modifiée avant que le formulaire ne soit soumis. Cependant, si vous la sélectionnez avec la souris, le formulaire est soumis juste avant que l'entrée ne soit modifiée, de sorte que la valeur soumise est juste ce que l'utilisateur a tapé (et non ce qu'il a sélectionné dans la liste déroulante de la complétion automatique). La solution de contournement qui semble fonctionner est la suivante :

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

Answer 2

Je n'ai pas pu commenter la réponse de @handsofaten, je vais donc compléter sa réponse ici. Il peut être plus judicieux d'utiliser valeur plutôt que étiquette car dans certains cas, mon cas, l'étiquette ne correspond pas à ce que l'utilisateur voudrait rechercher dans la base de données.

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

Answer 3

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

Le searchField est déjà alimenté par le champ sélectionné, il n'est donc pas nécessaire de le refaire dans cette fonction.

Documentation officielle : http://docs.jquery.com/Plugins/Autocomplete/result#handler

Answer 4

Vous soumettez le fichier sélectionné en appelant le bouton de soumission ID dans ce champ, même si le code est dans une autre page aussi.

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

Answer 5

  select: function( event, ui ) {

          if(ui.item){

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

    }

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

                  });