I was able to implement searchbar
as IONIC 2
documentation.
The problem is that I am bringing information from a remote database and I can not implement this database data in searchbar
. It's a matter of passing the variable array
to within the initializeItems()
function, but I can not.
I have tried to put initializeItems(){this.item[]}
, but then the value is null, below the codes I have:
TYPESCRIPT
export class ListaPage {
items:any[];
searchQuery: string = '';
constructor(public navCtrl: NavController, public service:ServiceProvider) {
this.getDados();
this.navCtrl=navCtrl;
this.initializeItems();
}
getDados(){
this.service.getData().subscribe(
data =>this.items=data,
err =>console.log(err)
);
}
chamaProd(pr){
this.navCtrl.push(ProdutoPage, {id: pr});
}
initializeItems() {
this.items = ['aqui','que','quero','chamar','os dados','do banco'];
}
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);
})
}
}
}
HTML
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
<ion-item-sliding *ngFor="let item of items">
<div *ngFor="let item of items">
{{item.nome}}
</div>