CODEWITHSUNDEEP
ionic-framework
Shaik
Shaik

Reputation: 296

Accordion dropdown filtering through ion search bar

Hi I just created the ionic accordion dropdowns by following a tutorial blog link which used widgets for creating an accordion dropdowns, Below is the link of that blog.

http://masteringionic.com/blog/2019-01-27-creating-a-simple-accordion-widget-in-ionic-4/

updated: here is the my project demo link https://stackblitz.com/github/dSaif/search-accordion Everything is working perfect, but i want to add Ion-searchbar at the top of the accordions sothat the dropdowns gets filter by inputing text.

please assist me how can i do that. Thank you.

Upvotes: 0

Views: 1648

Answers (1)

Andres
Andres

Reputation: 198

You are going to have to create a variable in your homepage to store your filtered results. Then you need to have a filter function that will take the input from the search bar and filter your master list. Keep in mind you should not set the new variable to the master list, this could cause issues due to object referencing.

So you should have something like

in your html

<ion-searchbar placeholder="Search a name." [(ngModel)]="searchValue" (ionChange)="filterList()"></ion-searchbar>

In your ts file

searchValue: string = '';
filteredList: Array<{ name: string, description: string, image: string }> = this.technologies;

// function called in the html whenever you change the ion searchbar value
private filterList(){
  //Make a variable so as to avoid any flashing on the screen if you set it to an empty array
  const localFilteredList = []
  this.technologies.forEach(currentItem => {
      //here goes your search criteria, in the if statement
      if(currentItem.name && currentItem.name.toLowerCase().includes(this.searchValue.toLowerCase())) {
          localFilteredList.push(currentItem);
      }
  });
  //finally set the global filter list to your newly filtered list
  this.filteredList  = localFilteredList;
}

You also need to make sure to reference the filterList variable instead of the current one you are referencing.

Upvotes: 1

Related Questions