Olá, estou utilizando este código de searchbar e está funcionando. Porém quero que a lista de itens apareça APENAS quando tiver algo escrito na searchbar. Basicamente NÃO quero que apareça uma "lista de todos os itens", apenas os itens filtrados quando digitar na searchbar. Se excluir o conteudo da searchbar os itens devem voltar a desaparecer. O que devo fazer? Já pesquisei muito pela internet e não acho nada. Desde já obrigado.
HTML:
<ion-content padding>
<ion-searchbar (ionInput)="getItems($event)" placeholder="" ></ion-searchbar>
<ion-list>
<button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">{{ item }}</button>
</ion-list>
</ion-content>
TS:
export class SearchPage {
searchQuery: string = '';
items: string[];
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.initializeItems();
}
initializeItems() {
this.items = [
'item 1',
'item 2',
];
}
getItems(ev: any) {
this.initializeItems();
let val = ev.target.value;
if (val && val.trim() != '') {
this.items = this.items.filter((item) => {
return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
})
}
}
itemTapped(event, item) {
this.navCtrl.push(
SearchPage, {item: item}
);
}
}