[Fixed] Ionic 3 SearchBar Component


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.

This is the normal home

This is after you search

This is when it's focused but there's no input

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

    // 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?


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.


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

Leave a Reply

(*) Required, Your email will not be published