En appuyant sur "enter" sur un input type=“text”, comment?

Je suis confronté à un problème que je ne peut pas résoudre JQuery Javascript. Pouvez-vous m'aider et m'aider à comprendre.D'abord voici mon code :

        (...)

        <script type="text/javascript">

        //Autocomplete suggestions
        $(function () {
            $("#autoCompInput").autocomplete({
                source: "/Suggestions",
                minLength: 3,
                select: function (event, ui) {
                    if (ui.item) {
                        $("#autoCompInput").val(ui.item.value);
                        $("form").submit();
                    }
                }
            });
        });

        //Provide search results
        $(function () {
            $("#autoCompSearch").click(function () {
                var searchParameters = $("#autoCompInput").val();

                var jsonData = JSON.stringify(searchParameters, null, 2);
                window.location = "/Search?criteria=" + searchParameters;
            });
        });

    </script>

    (...)

    <input class="ui-autocomplete-input" id="autoCompInput" role="textbox" aria-haspopup="true" size="50" autocomplete="off" aria-autocomplete="list" value = "@ViewBag.SearchInfo"/>
            <a id= "autoCompSearch" href = "#" ><img src="@Url.Content("~/Content/Menu/Images/magnifier.png")" alt="Search" /></a>

    (...)

Avec ce code, je ne peux pas utiliser la touche "Entrée" pour exécuter ma recherche. Lorsque l'utilisateur est dans l'entrée autoCompInput je voudrais être en mesure de détecter si il appuyer sur "entrée" et le lancement de la soumettre. J'ai lu, je dois ajouter une onkeyup="onKeyPressed(event)" événement, mais je ne comprends pas comment écrire le javascipt associés à la commande. J'ai essayé mais sans succès... avez-vous une solution pour moi?

Merci,

Aussi, je n'ai aucun problème pour afficher un message d'alerte. J'ai un problème à soumettre à ma recherche.
Vous devriez être en mesure d'utiliser la solution ci-dessous et remplacer le $("yourFormId").submit(); avec votre propre logique la fenêtre de ie.emplacement ...

OriginalL'auteur Bastien Vandamme | 2012-06-05

  1. 16

    Vous devez lier l'événement keypress à votre entrée

    $("#autoCompInput").bind("keypress", {}, keypressInBox);

function keypressInBox(e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code == 13) { //Enter keycode                        
        e.preventDefault();

        $("yourFormId").submit();
    }
};
    Dans mon cas, j'ai dû changer de $("yourFormId").submit(); var searchParameters = $("#autoCompInput").val(); var jsonData = JSON.stringify(searchParameters, null, 2); la fenêtre.emplacement = "/Search?critères=" + searchParameters;

    OriginalL'auteur workoholic

  2. 7

    Similaires HTML:

    <input type="text" id="myTxt" />
<input type="submit" id="mySubmit" />

    Ce script (qui utilise les dernières jQuery 1.7.2) devrait le faire:

    $('#mySubmit').click(function() {
    alert('Submitted!');
    return false;
});

$('#myTxt').on('keyup', function(e) {
    if (e.keyCode === 13) {
        $('#mySubmit').click();
    }
});

    Voici un exemple de travail.

    OriginalL'auteur FishBasketGordo

  3. 3

    Pour affecter un événement keyup en jquery

     $("#autoCompInput").keyup(function(event) {
                if (event.keyCode==13) {
                    alert('enter key');
                }
            });

    OriginalL'auteur Mayhem

  4. 0

    Je pense qu'il y a de mieux et de plus de solution standard pour ce type de problème.

    vous pouvez avoir un moyen de se former autour de ces apports et à chaque fois que vous appuyez sur entrée sur n'importe quelle entrée à l'intérieur de cette forme, il sera soumis à tout ce qui est dans l'attribut action du formulaire. C'est de cette façon qu'il pourrait ressembler (j'ai pris ton code, mais je suis de retirer les bits de pertinence pour ma réponse):

    <form id="idForJqueryOnly" action="/Search" method="GET">
  <input type="text" name="criteria" value="someuserinput"/>
  <button type="submit"><img src="...")" alt="Search" /></button>
</form>

    C'est le standard le comportement du navigateur. Ainsi, ce que le formulaire n'? lorsqu'il est soumis le navigateur crée une URL comme ceci:
    http://yourserverguesedfromthecurrenturl/Search?criteria=someuserinput
    Ce qui s'est passé est que le navigateur a pris toutes les entrées avec nom et la valeur (et non handicapées), de la forme et sérialisé dans l'url de la forme.
    Maintenant, le soumettre événement peut être déclenché en appuyant sur entrée sur les entrées à l'intérieur, y compris les boutons aussi longtemps que les boutons n'ont pas l'attribut type="button".

    Si vous vouliez faire plus de choses avec les données avec javascript avant d'aller à la page de recherche, vous pouvez le faire avec jquery:

    $("#idForJqueryOnly").submit(function(){
   //here you can do stuff like serialize the form, or sanitize the input of tue user.
  var data = $("#idForJqueryOnly").serialize();
  $("[name=criteria]").val($("[name=criteria]").val().customSanitizeMethod());

  //if you return false, the form will not submit, say, for validation errors:
  return customValidator.isFormValid("#idForJqueryOnly");
})

    OriginalL'auteur santiago arizti