it-swarm.com.de

html catch -Ereignis, wenn der Benutzer in eine Texteingabe eingibt

Ich frage mich nur, wie ich das Ereignis einfange, wenn der Benutzer in ein Texteingabefeld in meiner Webanwendung eingibt.

Szenario ist, ich habe eine Liste mit Kontakten. Am oberen Rand des Formulars kann der Benutzer den Namen des Kontakts eingeben, den er suchen möchte. Sobald die Texteingabe mehr als 1 Zeichen enthält, möchte ich mit der Suche nach Kontakten im System beginnen, die die vom Benutzer eingegebenen Zeichen enthalten. Während sie weiter tippen, ändern sich die Daten.

Alles was es wirklich ist, ist eine einfache Typ-Ahead-Funktionalität (oder Autovervollständigung), aber ich möchte Daten in einem anderen Steuerelement auslösen.

Ich kann den Text aus der Eingabe herausholen, sobald die Eingabe den Fokus verliert, aber dies passt nicht zur Situation.

Irgendwelche Ideen?

Vielen Dank

15
Matt

Verwenden Sie das keyup-Ereignis, um den Wert während des Benutzertyps zu erfassen, und suchen Sie nach diesem Wert:

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

Eine andere Option wäre das input -Ereignis, das alle Eingaben abfängt, von Schlüsseln, Einfügen usw.

17
adeneo

Warum verwenden Sie nicht das HTML-Ereignis "oninput"?

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

Ich würde die Ereignisse ' input ' und ' propertychange ' verwenden. Sie feuern auch beim Ausschneiden und Einfügen mit der Maus an.

Berücksichtigen Sie auch debouncing Ihren Event-Handler, damit schnelle Schreibkräfte nicht durch viele DOM-Aktualisierungen bestraft werden.

5
syazdani

sehe meinen Versuch:

sie sollten .combo nach jedem .input-Kurs eingeben.

.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();
});
0
Poya Eraghi