Cliquer manuellement ou programmatiquement sur l'input d'une datalist dynamic: apparition ou non des valeurs
Je programme une application angular et utilise une datalist dynamiquement
Code:
1
2
3
4
| <input id="inputCodePostalId" type="text" (click)="method1();" (keyup)="findPostalCode($event)" placeholder="Code Postal" formControlName="codePostal" list="codePostalId" />
<datalist id="codePostalId">
<option *ngFor="let code of postalCodeList" [value]="code">{{code}}</option>
</datalist> |
La datalist est alimentée avec les valeurs venant d'une requête
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| findPostalCode(event: any) {
let text = event.target.value;
if (event.which != 16 && text != null && text.length > 2) {
this.postalCodeList = [];
this.produitImmobilierService.getPostalCodes(text).subscribe(
result => {
this.postalCodeList = result;
setTimeout( function () {
var elem = document.getElementById("inputCodePostalId");
elem.click();
}, 500)
}
);
}
}
et
method1() {
console.log('ca passe CLICK');
} |
Quand je rentre 595 par exemple dans l'input, la requête est lancée et après, quand je clique manuellement les valeurs de la datalist apparaissent, mais quand je clique programmatiquement (voir le code au dessus), les valeurs de la datalist n'apparaissent pas
J'ai aussi essayé ceci
Code:
1
2
3
4
5
6
7
8
9
10
11
12
| findPostalCode(event: any) {
let text = event.target.value;
if (event.which != 16 && text != null && text.length > 2) {
this.postalCodeList = [];
const event1 = new Event('click');
const element = document.getElementById("inputCodePostalId");
this.produitImmobilierService.getPostalCodes(text).subscribe(
result => {this.postalCodeList = result;
setTimeout( function () {element.dispatchEvent(event1); },
500)});
}
} |
