Hi guys
I am trying to do a live search that filters through a JSON Array and moves to the respective slide in the Ionic slider. I can successfully implement a live search that works on a normal list but am having trouble with the slider. Here is my code:
//user enters keyword i.e title
<ion-item>
<ion-searchbar [(ngModel)]="searchTerm" [formControl]="searchControl" placeholder="Find your movie" class="seachbar-icon"></ion-searchbar>
</ion-item>
//slider implementation: it has 3 slides on a view and should filter the slide to show in the center
<ion-slides centeredSlides="true" slidesPerView="1" loop=true initialSlide="1">
<ion-slide *ngFor="let item of items">
<h2>{{item.title}}</h2>
<p>{{item.genres}}</p>
<p >{{item.running_time}}</p>
</ion-slide>
</ion-slides>
//Items Array
[
{"id":"2211","title":"Dark Tower, The","genres":"Action, Adventure, Fantasy, Horror, Sci-fi, Western","running_time":"91","age_restriction":"10–12PG V","Showtime":"2017-09-08 10:15:00"},
{"id":"4579","title":"Logan Lucky","genres":"Caper, Comedy, Crime, Drama","running_time":"118","age_restriction":"10–12PG L V","Showtime":"2017-09-08 09:30:00"},
{"id":"4722","title":"9/11","genres":"Action, Drama, Suspense","running_time":"90","age_restriction":"16 L V","Showtime":"2017-09-08 09:45:00"},
{"id":"4707","title":"Glass Castle, The","genres":"Biopic, Drama","running_time":"127","age_restriction":"13 D L SV V","Showtime":"2017-09-08 09:15:00"},
{"id":"4802","title":"Poster Boys","genres":"Comedy","running_time":"128","age_restriction":"","Showtime":"2017-09-08 10:00:00"},
{"id":"4651","title":"Bounce Back, The","genres":"Comedy, Romance","running_time":"104","age_restriction":"","Showtime":"2017-09-05 17:30:00"},
{"id":"4698","title":"Fun Mom Dinner","genres":"Comedy","running_time":"89","age_restriction":"16 L","Showtime":"2017-09-05 17:15:00"}
]
//logic
filterItems(searchTerm){
return this.items.filter((item) => {
return item.title.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;
});
}
setFilteredItems(){
this.items = this.dataService.filterItems(this.searchTerm);
}