I want a search bar that actually searchs but I dont know how to do it

Ionic Framework ionic-v3
1

I added the searchbar in, but I dont know how I can let it search. I have data in ion-card , I want to search from the cards.
I use this as my data source: https://gyazo.com/fd066f485f8325aaa2aa3ff6ca5c65ee . I have more in it but this is just an example. Thanks for helping!

2

What searchbar exactly? Can you show us your code, best in a simplified version? Does any of the sample apps have the functionality you are looking to implement?

3


I am really new and I want to make this work. I would appreciate the help. I also try to count all the names and show it as : 12 names. I try to show it in a card.
Thanks in advance!

4

If you want an input that looks like a searchbox but limits the items in a list shown matching to what you entered into the input field that is probably called a filter.

In Angular (and so Ionic) these can be built with pipes I think: https://angular.io/docs/ts/latest/guide/pipes.html But I have no experience with these myself, so am not 100% sure and can’t really help you. Hope someone else can. Or maybe this helps: http://stackoverflow.com/questions/34164413/how-to-apply-filters-to-ngfor

5

The ionic conference app has an example implementation of the ion-searchbar. Look at the <ion-searchbar> tag in schedule.html and the updateSchedule() function in schedule.ts.

2 Likes
6

Or in words:

In schedule.html there is an ion-searchbar that looks like this:

<ion-searchbar color="primary"
                   [(ngModel)]="queryText"
                   (ionInput)="updateSchedule()"
                   placeholder="Search">
</ion-searchbar>

It is connected to a ngModel queryText and on input the method updateSchedule() is called.

updateSchedule() can be found in schedule.ts and looks like this:

  updateSchedule() {
    // Close any open sliding items when the schedule updates
    this.scheduleList && this.scheduleList.closeSlidingItems();

    this.confData.getTimeline(this.dayIndex, this.queryText, this.excludeTracks, this.segment).subscribe((data: any) => {
      this.shownSessions = data.shownSessions;
      this.groups = data.groups;
    });
}

It calls getTimeline() with queryTextas a parameter. This function is part of the provider conference-data.ts. It uses the parameter it gets to filter down the list of conference talks and returns only those including the words of queryText.

Then it writes the result back into the variable that is used to show the sessions in the first place.

7

Thank you guys so much for the help! It works now, But do you guys also know how to count all the groepen and show it in a card as 12 groepen. I have all the names in a card but I want 1 card to tell me that there are 20 people in 1 group.

8

I know what everything does now, but this is the only problem that is not working. Typescript Error
Property ‘confData’ does not exist on type ‘Page2’.