html Catch-Ereignis, wenn der Benutzer in eine Texteingabe tippt

Ich frage mich nur, wie ich das Ereignis abfangen kann, wenn der Benutzer in ein Texteingabefeld in meiner Webanwendung eintippt.

Szenario ist, ich habe ein Kontaktlistenraster. Oben im Formular kann der Benutzer den Namen des gesuchten Kontakts eingeben. Sobald die Texteingabe mehr als 1 Zeichen enthält, möchte ich mit der Suche nach Kontakten im System beginnen, die diese vom Benutzer eingegebenen Zeichen enthalten. Während sie weiter tippen, ändern sich die Daten.

Alles, was es wirklich ist, ist eine einfache Type-Ahead-Type-Funktionalität (oder Autocomplete), aber ich möchte Daten in einem anderen Steuerelement abfeuern.

Ich kann den Text aus der Eingabe herausholen, sobald die Eingabe den Fokus verloren hat, aber das passt nicht zur Situation.

Irgendwelche Ideen?

Vielen Dank

Verwenden Sie das Keyup-Ereignis, um den Wert zu erfassen, während der Benutzer eintippt, und tun Sie, was immer Sie tun, um nach diesem Wert zu suchen:

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

Eine weitere Möglichkeit wäre die input Ereignis, das alle Eingaben abfängt, von Tasten, Einfügen usw.

Warum nicht das HTML-oninput-Ereignis verwenden?

<input type="text" oninput="searchContacts()">

Ich würde das ‘Eingang‘ und ‘Eigentumsänderung‘ Veranstaltungen. Sie feuern auch auf Ausschneiden und Einfügen über die Maus.

Bedenke auch entprellt Ihren Event-Handler, damit schnelle Schreiber nicht durch viele DOM-Aktualisierungen bestraft werden.

siehe mein Versuch:

Sie sollten .combo nach jeder .input-Klasse einfügen.

.input ist ein Textfeld und .combo ist ein 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();
});