Explication détaillée de l'implémentation jQuery de la fonction de recherche par saisie au clavier

Cet article présente principalement jquery pour implémenter la fonction de recherche de saisie au clavier. Le code frontal et le code d'implémentation du bouton de recherche sont publiés pour tous les amis qui en ont besoin peuvent s'y référer.

Au départ, j'ai toujours pensé qu'il n'y avait rien de trop difficile à faire dans une recherche. Ce n'est que lorsque j'ai reçu le dernier projet pour réaliser la recherche sans utiliser de boutons que j'ai commencé à chercher cette technologie sur le site. Internet Alors, sans plus tarder, je vais mettre mon code source pour votre référence.

Code frontal

<p class="fl search-box"> 
     <button type="button" name="btnSubmit" id="btnSubmit" class="btnSubmit">搜索</button>
     <input id="sousuo" name="sousuo" type="search" placeholder="输入搜索内容" value="">
</p>

Implémentation du bouton de recherche

$(function () {
   $("body").on("click", "#btnSubmit", function () {
    var sousuo = $("#sousuo").val();
    if (sousuo == "") { alert("请输入信息"); return false; }
    location.href = "{$:CSSiteUrl}search.html?keywords=" + escape(sousuo);
   });
  });

Ce qui suit est le point culminant de cette période, appuyez sur Entrée sur le clavier pour réaliser la recherche

$('#sousuo').bind('keypress', function (event) { 
   if (event.keyCode == "13") { 
    $("#btnSubmit").click();
   }
  })

Peut-être pouvez-vous trouver que cela équivaut en fait à renvoyer La clé de voiture event.keyCode == “13” est le 13ème code clé du clavier. Avec cette aide, si vous souhaitez implémenter d'autres touches à l'avenir, il vous suffit d'interroger le code clé correspondant du clavier.

Résumé

Recommandations associées :

Exemple d'analyse de la saisie, de la soumission, du bouton et de la saisie Différences dans les données de soumission des clés

Comparez la différence entre le retour chariot et le saut de ligne

jquery Il y a deux pressions sur une touche dans le même fichier, deux lorsque en appuyant sur Entrée, tout est déclenché

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!