Как использовать автозаполнение в строке поиска на Ionic 4?

Question

Я ищу какой-то пример, но не вижу, чтобы кто-нибудь гуглил его, просто я хочу жестко закодировать 2 или 3 слова, большое спасибо.Должен ли я искать на ионном 3?или в angular2 лучше?

Answer 1

Ответ Мохана Гопи завершен, но для использования атрибута debounce необходимо использовать событие ionChange вместо события ionInput.

<ion-searchbar type="text" debounce="500" (ionChange)="getItems($event)"></ion-searchbar>
...
...

Таким образомсобытие сработает после того, как пользователь перестанет печатать (после того, как прошло 500 миллисекунд с момента его последнего нажатия клавиши), а не всякий раз, когда нажата клавиша.

Answer 2

В вас HTML

 <ion-searchbar type="text" debounce="500" (ionInput)="getItems($event)"></ion-searchbar>
<ion-list *ngIf="isItemAvailable">
  <ion-item *ngFor="let item of items">
    {{ item }}
  </ion-item>
</ion-list>

в вашем файле TS

this.isItemAvailable = false; // initialize the items with false

initializeItems(){ 
    this.items = ["Ram","gopi", "dravid"]; 
}

getItems(ev: any) {
    // Reset items back to all of the items
    this.initializeItems();

    // set val to the value of the searchbar
    const val = ev.target.value;

    // if the value is an empty string don't filter the items
    if (val && val.trim() != '') {
      this.isItemAvailable = true;
      this.items = this.items.filter((item) => {
        return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }