Implement a Search Bar on your Ionic app to filter your Firebase data

Introduction

As you probably know by now, Firebase is a noSQL database, something a lot of people really like.

But if you come from a SQL background, like I do, sometimes things that are easy for other people end up being a real challenge for us.

I want to show you one way I found on how to integrate a search-bar with Firebase, so that you can start typing and your Ionic app filters all the data in real time.

By the end of this post, you’ll be able to integrate a search-bar with Firebase from your Ionic 2 app, making data filtering easy on yourself without multiple database calls on keystroke.

Let’s get coding

The first thing you’ll need is to create an configure your app, I usually write the creation and configuration process in every post, but it’s making it harder for me to keep them up-to-date.

So if you need to know how to create and initialize your Firebase app, just read this tutorial first.

Also, if you click on the link above to get the source code, you’ll have access to my Firebase database with dummy data, which has a list of all the countries in the world ready to be used for this example.

The View

The first thing we’ll do is to create our view, it’s going to be something really simple, open the home.html file and create the search bar component and a list to loop through the countries.


<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
<ion-list>
  <ion-item *ngFor="let country of countryList">
    <h2> {{ country.name }} </h2>
    <h3> Code: <strong>{{ country.code }}</strong> </h3>
  </ion-item>
</ion-list>

The <ion-searchbar> is an Ionic 2 component that gives us a really nice looking search bar at the top of our file (also remove padding from ion-content so it doesn’t look weird).

And the list is looping through an array called countryList, showing our users the country’s name and code.

Now our job is to connect that search bar with the list, so every time the user types something the list gets updated.

The code

Go ahead and open home.ts and the first thing we’ll do is to import Firebase, after all, we need to get our data from somewhere 😛

import firebase from 'firebase';

Now that Firebase is imported, we’re going to create a couple of variables just before the constructor:

public countryList:Array<any>;
public loadedCountryList:Array<any>;
public countryRef:firebase.database.Reference;

countryRef: Is for creating a database reference so we can pull the data from Firebase.
countryList: Is to store the list of countries we’re pulling from Firebase.
loadedCountryList: Is a bit of a hack, that I will explain when we get to it 🙂

Now, go inside your constructor and create the database reference:

this.countryRef = firebase.database().ref('/countries');

That will open a reference to our Firebase database under the /countries node.

After that, we’re going to pull our data from Firebase, but before, let me explain something.

There are 2 ways of using a search bar to query data:

Query the data real-time from the database, meaning it will send a query on every keystroke.
Pull the data and query it in your phone, meaning it pulls the data once and then filters that array.

We’re going to use the second method, because:

You can only query for the exact value in Firebase, so if you query for ‘United’ you won’t get ‘United States of America’ as a result.
If you manage to pull that off, you’ll still be sending a hit to the database on every single keystroke.

Now that we got that out of the way, let’s pull the data from Firebase into the countryList array:


this.countryRef.on('value', countryList => {
  let countries = [];
  countryList.forEach( country => {
    countries.push(country.val());
    return false;
  });

  this.countryList = countries;
  this.loadedCountryList = countries;
});

FGF-College-Work / Forum