web-dev-qa-db-fra.com

JQuery Autocomplete: Soumettre le formulaire lors de la sélection?

Utilisation de la saisie semi-automatique JQuery sur un formulaire HTML traditionnel.

Essayer de soumettre le formulaire (à l'ancienne) quand une sélection est faite.

Mais la zone de saisie est remplie et je dois ensuite appuyer sur "Entrée" une deuxième fois ou cliquer sur le bouton Envoyer.

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

Comment envoyez-vous le formulaire automatiquement lorsque la sélection est faite?

jqueryformsautocompletesubmit
31
ILT

UPDATE: J'ai enfin compris celui-ci, le code ci-dessous devrait faire l'affaire. Pour une raison quelconque, le rappel change ne fonctionnait pas, mais les rappels close & select fonctionnent. Utiliser 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(); }
    });
});

AUTRE MISE À JOUR: Ok, il y a aussi un problème avec le callback select, qui est celui par défaut (dans le code ci-dessus) si vous parcourez le menu déroulant à complétion automatique avec le clavier, et sélectionnez avec la touche Entrée, l'entrée est changé avant que le formulaire soit soumis. Cependant, si vous le sélectionnez avec la souris, le formulaire est soumis juste avant que l'entrée ne soit modifiée. La valeur soumise correspond donc à la saisie de l'utilisateur (et non à celle qu'elle a sélectionnée dans la liste déroulante de saisie semi-automatique). La solution qui semble fonctionner est la suivante:

$("#searchField").autocomplete({
    source: "values.json",
    minLength: 2,
    select: function(event, ui) { 
        $("#searchField").val(ui.item.label);
        $("#searchForm").submit(); }
});
49
bjudson
$( "#searchField" ).result(function(event, data, formatted) {
  $(this).closest("form").submit();
});

Le champ de recherche est déjà rempli avec 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

7
tarkeshwar

Je ne peux pas commenter la réponse de @handsofaten, je vais donc ajouter quelque chose à sa réponse ici. Il peut sembler plus judicieux d’utiliser value plutôt que label car dans certains cas, dans mon cas, l’étiquette n’est pas ce avec quoi l’utilisateur voudrait effectuer une recherche dans la base de données.

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

Vous soumettez votre fichier sélectionné en appelant l'ID du bouton Soumettre dans ce champ, même si le code se trouve également dans une autre page.

 document.getElementById('submit').click();
0
MD Shahrouq