Discussion :

[flamant]

Je programme une application angular et utilise une datalist dynamiquement

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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)});
        }
      }

[dukoid]

ce n'est pas de l'angular
c'est un problème javascript et de ta librairie javacript datalist, il faut voir avec la doc sur cette librairie

[flamant]

j'ai regardé sur ça : https://html.spec.whatwg.org/multipa...talist-element mais ça ne m'aide pas beaucoup

[krakatoa]

c'est quoi le but de la fonctionnalité ?

[flamant]

Le but de la fonctionnalité est de saisir un code postal et je veux qu'après 3 caractères saisis, envoyer une requête pour afficher les codes postaux contenant ces 3 caractères. Pour le code postal, ça ne présente pas un très gros intérêt, mais je vais le faire plus tard pour le nom de la commune

[krakatoa]

pas besoin de reinventer la roue

suffit de chercher sur internet: angular autocomplete request api

https://www.freakyjolly.com/angular-.../#.X5v6UYhKiM8