Trigger-Ereignis, wenn ein Benutzer Text eingeben und drücken Sie die Eingabetaste oder klickt auf ein Element aus einer Datenliste

Question

Ich habe ein Eingabefeld für Benutzer mehrere E-Mails eingeben, und eine Liste der zuvor verwendeten E-Mails, die in einer Datenliste erscheinen. Ich möchte die Methode onNewToEmailAdded() jedes Mal aufrufen, wenn ein Benutzer Text in das Feld eingibt und die Eingabetaste drückt oder einen Wert aus der Datenliste auswählt. Wie kann ich das machen (ich benutze Angular 2). Im Moment wird die Methode nur aufgerufen, wenn die Enter-Taste gedrückt wird, sobald ein Eintrag aus der Liste ausgewählt wurde.

<input type="email" class="form-control" [(ngModel)]="nweEmail" (keyup.enter)="onNewToEmailAdded()" 
    list="toEmailsList" /> 
<datalist id="toEmailsList"> 
    <option *ngFor="let email of previousToEmails">{{email}}</option> 
</datalist> 

Answer 1

Wegen des Mangels an Ereignisse auf Datalist, können Sie nicht direkt das Ereignis auslösen, wenn eine E-Mail auf der Liste angeklickt wird, damit nur Ihre Lösung Taste nach der Auswahl gedrückt auf Eingabe arbeiten. Aber Sie können immer noch eine Abhilfe verwenden, indem Sie mit dem (Eingang) Ereignisse auf dem Eingabeelement wie:

<input type="email" class="form-control" (input)="compareInput($event.target.value) "[(ngModel)]="nweEmail" (keyup.enter)="onNewToEmailAdded()" 
    list="toEmailsList" /> 
<datalist id="toEmailsList"> 
    <option *ngFor="let email of previousToEmails">{{email}}</option> 
</datalist> 

Dieses Ereignis wird jedes Mal ausgelöst werden, mir etwas ändert auf dem Eingabefeld, an diesem Punkt den Wert auf dem Feld zurückkehrte . Von dort vergleichen Sie den zurückgegebenen Wert mit Ihrer Liste von previousToEmails und wenn es eine Übereinstimmung ist, tun Sie, was Sie tun wollten, wenn auf ein Element in der Datenliste geklickt wurde.

compareInput(value) { 
//if value is in the list do something 
} 

Beachten Sie auch, dass durch diese Weise, wenn der Benutzer eine E-Mail, die ohne die Auswahl auf dem previousList ist, sobald es das letzte Zeichen erreicht das Ereignis ausgelöst wird, wie es ausgewählt wurde, die zu fremden führen kann Verhalten für den Benutzer.