Comment implémenter searchbox comme dans le site Web de débordement de pile?

Question

J'ai un champ de recherche dans la page Web. Lorsque l'utilisateur appuie sur la touche Entrée après avoir saisi du texte dans cette zone de texte, la fonction de recherche doit être exécutée. Comment faire ça?

Answer 1

J'ai implémenté cette fonctionnalité très facilement! J'ai un champ de recherche et un bouton avec . Ces contrôles sont entourés par un panneau ASP, j'ai défini la propriété DefaultButton du panneau en tant qu'ID du bouton. Maintenant en entrant du texte et en appuyant sur la touche Entrée, la fonctionnalité de recherche présente dans l'événement de clic sur le bouton est exécutée et le bouton n'est pas visible pour l'utilisateur !!!

Answer 2

Vérifiez l'événement onkeypress de cela et recherchez le code de touche 13. Une fois que le code de touche 13 est frappé, appuyez sur un clic d'un bouton caché et faites la programmation sur l'extrémité arrière de l'événement de ce bouton caché.

Answer 3

S'il s'agit du seul champ de texte de votre formulaire, appuyez sur Entrée pour que le gestionnaire d'onsubmit s'exécute. Mais cela va soumettre toute la page. Si vous souhaitez exécuter une commande ajax à l'appel et ne pas actualiser la page entière, assurez-vous que votre gestionnaire d'onsubmit renvoie false.

Pour faire une forme régulière pleine page soumettre lorsque vous appuyez sur Entrée:

<form action="/doit"> 
    <input type="text" value=""/> 
    </form> 

Pour ce faire un formulaire ajax soumettre quand entrez est pressé, quelque chose comme ce code jquery pourrait être utilisé:

$("form").submit(function() { 
    $.ajax(...); 
    return false; 
    }); 

Answer 4

S'il n'y a qu'un seul champ de saisie dans un formulaire, le formulaire sera envoyé lorsque vous appuyez sur Entrée même s'il n'y a pas de bouton "Envoyer".

par exemple

<form action="/search"> 
    <input type="text" value="search text"> 
</form> 

soumettront lorsque vous appuyez sur Entrée.

Answer 5

Pour l'essentiel, vous pouvez le faire comme ceci: J'aime utiliser jquery pour la plupart des choses javascript pour la compatibilité croisée des navigateurs.

$("#btnID").keypress(function(event){ 
      //filter enter key only 
      if(event.keyCode == 13){ 
       //do something here 
      } 
      return true; 
     });