Angular Firebase AutoComplete Search example with AngularFire2 v4

In this tutorial, we’re gonna create a simple Angular App that supports autocomplete search from Firebase Realtime Database using AngularFire2.

Related Posts:
How to integrate Firebase with Angular
Angular Firebase CRUD operations with AngularFire2 v4
Angular Firebase Pagination example with AngularFire2 v4
Angular Firebase Filter Data example with AngularFire2 v4

I. Technology

– Angular
– AngularFire2 4.0

II. Overview

Assume that we have Firebase Database like this:

We will build an Angular App that supports searching Customer by name:

II. How to do

1. Set up the Firebase Project & Install AngularFire2

Please visit this post to know step by step.


2. Build Angular App that can add & display list of data items

(Or you can skip this if you just wanna know way to implement searching)
This tutorial bases on code from previous posts (that helps us add and display data).

You can find how to do this in the post:
Angular Firebase CRUD operations with AngularFire2 v4

And more practice with Pagination:
Angular Firebase Pagination example with AngularFire2 v4


We just need to add a Search Component.

3. Support Searching

3.1 Indexing

We usually need to sort data when our database grows larger. It can be done simply by telling Firebase use an index with .indexOn (Firebase Console – Database RULES tab):

3.2 Service with AngularFireDatabase

Basing on the code from previous post, we just add a function that returns a List of Items:

import {AngularFireDatabase, FirebaseListObservable} from 'angularfire2/database';

export class CustomerService {

  private dbPath: string = '/customers';

  constructor(private db: AngularFireDatabase) {}

  findCustomers(start, end): FirebaseListObservable {
    return this.db.list(this.dbPath, {
      query: {
        orderByChild: 'name',
        limitToFirst: 6,
        startAt: start,
        endAt: end

3.3 Component for searching

<h2>Find Customers By Name</h2>
<input type="text" (keyup)="search($event)" placeholder="enter name" class="input">

	<li *ngFor="let customer of customers">
		<h4>{{}} - Age: {{customer.age}} - Active:	{{}}</h4>

<hr />
<div *ngIf="customers?.length < 1">
	<p>Not found!</p>

search function will be called on every keyup event that sends current value of the input. This is used for updating startWith and endWith Firebase query pattern.

import {Component, OnInit} from '@angular/core';
import {CustomerService} from '../customer.service';
import { Subject } from 'rxjs/Subject'

  selector: 'app-search-customers',
  templateUrl: './search-customers.component.html',
  styleUrls: ['./search-customers.component.css']

export class SearchCustomersComponent implements OnInit {

  startWith = new Subject()
  endWith = new Subject()
  customers: any[]
  constructor(private customerService: CustomerService) {}

  ngOnInit() {
    this.customerService.findCustomers(this.startWith, this.endWith)
                        .subscribe(customers => this.customers = customers)
  search($event) {
      const queryText = $ + '\uf8ff')


endWith gets an added Private Usage Area [PUA] unicode character ‘\uf8ff‘. It is after most regular characters in Unicode, so the query matches all values that start with queryText.

III. Check Result


IV. Source Code


10 thoughts on “Angular Firebase AutoComplete Search example with AngularFire2 v4”

  1. Thank you for the great post.

    I have as follow:

      search($event) {
          if ($event.timeStamp - this.lastKeypress > 200) {
            let q = $;
          this.lastKeypress = $event.timeStamp;

    However it seems that there is always one character delay in displaying the results.

    For example, when I type “M”, then it doesn’t do anything. Only after I press another character “Y” or spacebar, then it displays the results for “M”.

    How would I make it so that it displays as soon as the first character is inputted?

    Any help will be much appreciated.

    Thank you.

    1. Hi Steve,

      I have checked code with timestamp, it also works well.
      Right after typing the first key, it shows relevant customers for the key.

        startWith = new Subject()
        endWith = new Subject()
        lastKeypress = 0;
        search($event) {
          if ($event.timeStamp - this.lastKeypress > 200) {
            const queryText = $
   + '\uf8ff')
          this.lastKeypress = $event.timeStamp;



      1. Thank you for this! I’ve noticed that no results are shown unless I have pressed a key. I’ve tried using (keyup)/(keydown) but neither show the default list until a key is pressed. Happen to know a work-around? I feel like it’s dead simple, but Im unable to find anything on Google. Thanks again!

  2. I am getting this error on v5:

    ERROR Error: Query: First argument passed to startAt(), endAt(), or equalTo() cannot be an object

    Any suggestions? Thanks, great article.

  3. Hi! Thanks so much for the tutorial.

    I was wondering if you could recommend a way to filter out unique items? For example, if I search for Jack and have two or more items that are exactly the same (say “Jack – Age: 27 – Active: true”), is there a way to only show one in the search result?

    Any help would be greatly appreciated, thank you!

  4. Hey there i get an error as on ngOnInit() the query startAt and endAt expects a value like string not Subject. So when reaching to the the service the getCustommers doesn’t understand parameters Subject since it’s expecting a value

  5. thanks for this, but i if i type the normal characters not capital, it doesnot show for me, how to convert to normal characters

  6. the array customers[] is used to be empty with me it does not load data but when i remove startAt & endAt from the query:
    query: {
    orderByChild: ‘name’,
    limitToFirst: 6,
    startAt: start,
    endAt: end
    then it loads data but does not filter data.
    can you please tell me whats the matter

Leave a Reply

Your email address will not be published. Required fields are marked *