Skip to content Skip to sidebar Skip to footer

Searchbar With Filter From JSON Data With Ionic 3

I would like to have a search bar that filters the results based on the name of the book, I tried to do it but it does not work. When I'm looking for something, nothing happens, no

Solution 1:

Change the search bar to the following

  <ion-searchbar placeholder="Filter Items" [(ngModel)]="searchTerm" (ionInput)="filterItems()"></ion-searchbar>
<ion-grid>
        <ion-row>
            <ion-col *ngFor="let item of filterItems">
                <ion-card-header><h1>{{item.title}}</h1></ion-card-header>
                <ion-card-header><h3>Autore:{{item.author}}</h3></ion-card-header>
                <div id="immagine">
                    <img src="../assets/{{item.imageLink}}">
                </div>
            </ion-col>
        </ion-row>
    </ion-grid>   

Then in your ts file add this:

    searchTerm: string ;
    filterItems:any;
 loadData(){
    let data:Observable<any>;
    data = this.http.get("assets/books.json");
    data.subscribe(result => {
      this.items = result;
      this.filterItems= this.items;
    })

    filterItems(){
    this.filterItems = this.items.filter(item =>  item.title.toLowerCase().indexOf(this.searchTerm.toLowerCase()) > -1;
     )
    }

Post a Comment for "Searchbar With Filter From JSON Data With Ionic 3"