[Fixed] Ionic 3 SearchBar Component

Issue

I’m trying to recreate a ionic searchbar to search through all of the events in my app coming from cloud firestore. I’ve read so many things about this but I don’t understand how the searchbar even works. Could anyone help me?

What I’m trying to do is that when the searchbar is unfocused everything works normal, but when you click on the searchbar and enter something that you get something like an overlay under the searchbar listing all of the events that were found and then when you cancel you just see the normal page again.

EDIT: Ok I’ve managed to hide and show everything depending on the input,
but the filtering function isn’t doing anything noticeable….

getItems(ev: any) {

    // Reset items back to all of the items
    this.initializeItems();

    // set val to the value of the searchbar
    const val = ev.target.value;
    if (val && val.trim() != '') {
      this.showList = true;
      this.items = this.items.filter((item) => {
        return (item.title.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    } else {
      this.showList = false;
    }
  }

What could this be?

Solution

If I understand you correctly, you want to hide that image that says, “New at La Cantina”, and display only the search results when something is typed into the search bar? You can use an ngIf directive and assign it the variable you are using to store the search term and apply the NOT operator on it, so that the DIV only shows when the search variable is empty.

Example:

<div *ngIf="!searchVariable">Stuff you want hidden when the search term is typed</div>