Hello,
I’m creating a simple news reader. Right now I have a list of feeds that I show like this:
<ion-card *ngFor="let feed of feeds">
<img (click)="itemSelected(feed.url)" [src]="feed.img" />
<ion-card-content (click)="itemSelected(feed.url)">
<ion-card-title>
{{feed.post_title}}
</ion-card-title>
<p [innerHTML]="feed.post_excerpt"></p><br/>
<span [innerHTML]="feed.post_date" class="data_e_hora"></span> - <span>{{feed.autor}}</span>
</ion-card>
and my .ts is:
public feeds: Array <any>;
fetchContent ():void {
let loading = this.loadingCtrl.create({
content: 'Searching...'
});
loading.present();
this.http.get(this.url).map(res => res.json())
.subscribe(data => {
this.feeds = data.data;
loading.dismiss();
});
}
This is working perfectly but I’m trying to implement a user search. First of all, I’d like the search bar to be hidden until the user presses the search button so I made:
private toggled: boolean;
constructor(public navCtrl: NavController, public loadingCtrl: LoadingController, public http: Http, public actionSheetCtrl: ActionSheetController, private sharingVar: SocialSharing, public storage: Storage) {
this.toggled = false;
}
toggleSearch() {
this.toggled = this.toggled ? false : true;
}
and for my HTML:
<ion-searchbar *ngIf="toggled" [(ngModel)]="searchTerm" [showCancelButton]="true" (ionCancel)="toggleSearch()" (ionInput)="filterItems()" placeholder="Digite sua busca..." animated></ion-searchbar>
<!-- Search Icon -->
<ion-buttons end *ngIf="!toggled">
<button ion-button icon-only (click)="toggleSearch()"><ion-icon name="search"></ion-icon></button>
</ion-buttons>
This is also working perfectly when searching I’m using:
public hasFilter: boolean = false;
public searchTerm: string = '';
public searchTermControl: FormControl;
constructor(public navCtrl: NavController, public loadingCtrl: LoadingController, public http: Http, public actionSheetCtrl: ActionSheetController, private sharingVar: SocialSharing, public storage: Storage) {
this.searchTermControl = new FormControl();
this.searchTermControl.valueChanges.debounceTime(1000).distinctUntilChanged().subscribe(search => {
if (search !== '' && search) {
this.filterItems();
}
})
}
filterItems() {
this.hasFilter = false;
this.feeds = this.feeds.filter((item) => {
return item.post_title.toLowerCase().indexOf(this.searchTerm.toLowerCase()) > -1;
});
}
And the search is also working but whenever I erase what I’m searching, I’m unable to go back to ALL the posts. What am I doing wrong?
Feeds is a JSON, that’s why I’m using this.post_title.toLowerCase()
Thank you!