使用 http 请求自动完成 updateData()

作者: troncomputers创建于 2018年2月22日更新于 2023年9月20日

Hi! I have a problem with autocomplete.updateData()

xml

 <div class="input-field" style="padding:0px;margin-top:0em;margin-bottom:0em">
  <input type="text" placeholder="podaj kod towaru" id="pozycje_autocomplete"
     (change)="selectTowar($event)" autocomplete="off" class="autocomplete" name="kodTowaru" [(ngModel)]="kodTowaru"
     (keyup.Enter)="dodajPozycje()" (keyup)="szukajTowary($event)" style="text-align:center;height:2em">
 </div>

It's all about (keyup)="szukajTowary($event)"

javascript

  ngAfterViewInit() {
    const pozycje_autocomplete = document.querySelector('#pozycje_autocomplete');
    M.Autocomplete.init(pozycje_autocomplete, {
      limit: 5
    });
  }

  szukajTowary(event:any)
  {
    const pozycje_autocomplete = document.querySelector('#pozycje_autocomplete');
    let instance = M.Autocomplete.getInstance(pozycje_autocomplete);

    this.http.get('http://192.168.0.110:9000/tron/towary/'+event.target.value)
      .subscribe((result: any[]) => {
        let pozycje = [];
        for (var i = 0; i < result.length; i++) {
          pozycje[result[i]] = null;
        }
        console.log(pozycje);
        instance.updateData(pozycje);
      });
  }

Console.log displays data correctly when I type, for example, letter 's'

[IGLAKI_CYPRYS: null, KORA_S80: null, PIŁA_SPALINOWA: null, SEKATOR: null, SKRZYNKA: null, …]
IGLAKI_CYPRYS: null
KORA_S80: null
PIŁA_SPALINOWA: null
SEKATOR: null
SKRZYNKA: null
STOJAK: null
SZPADEL: null
ZESTAW_OGR: null
length: 0
__proto__: Array(0)

It's not showing autocomplete dropdown. Sometimes after couple tries it works but it's messed up with items from request before.

内容来源: Dogfalo/materialize

查看 GitHub 原文在 GitHub 查看讨论