web-dev-qa-db-fra.com

html catch event lorsque l'utilisateur tape dans une entrée de texte

Je me demande simplement comment je vais attraper l'événement lorsque l'utilisateur tape dans un champ de saisie de texte sur mon application Web.

Le scénario est, j'ai une grille de liste de contacts. En haut du formulaire, l'utilisateur peut taper le nom du contact qu'il tente de trouver. Une fois que la saisie de texte contient plus d'un caractère, je souhaite commencer à rechercher des contacts dans le système contenant ces caractères saisis par l'utilisateur. Comme ils continuent à taper les changements de données.

Il s’agit en réalité d’une simple fonctionnalité de type anticipé (ou autocomplete) mais je souhaite utiliser des données dans un contrôle différent.

Je peux extraire le texte de l'entrée une fois que celle-ci a perdu son focus, mais cela ne convient pas à la situation.

Des idées?

Merci

javascriptjqueryhtmlinputtypeahead
15
Matt

Utilisez l'événement keyup pour capturer la valeur lorsque l'utilisateur le tape et faites ce que vous faites pour rechercher cette valeur:

$('input').on('keyup', function() {
     if (this.value.length > 1) {
          // do search for this.value here
     }
});

Une autre option serait l'événement input, qui intercepte n'importe quelle entrée, des clés, du collage, etc.

17
adeneo

Pourquoi ne pas utiliser l'événement HTML oninput?

<input type="text" oninput="searchContacts()">
9
Hiram A

J'utiliserais les événements ' input ' et ' propertychange '. Ils tirent également sur couper et coller via la souris.

En outre, considérez debouncing votre gestionnaire d'événements afin que les dactylographes rapides ne soient pas pénalisés par de nombreux rafraîchissements DOM.

5
syazdani

voir mon essai:

vous devriez mettre .combo après chaque classe .input.

.input est une zone de texte et .combo est une div

$(".input").keyup(function(){
    var val = this.value;
    if (val.length > 1) {
        //you search method...
    }
    if (data) $(this).next(".combo").html(data).fadeIn(); else $(this).next(".combo").hide().html("");
});

$(".input").blur(function(){
    $(this).next(".combo").hide();
});
0
Poya Eraghi