Autocomplete with Firebase

Question

How does one use Firebase to do basic auto-completion/text preview?

For example, imagine a blog backed by Firebase where the blogger can tag posts with tags. As the

Answer 1

As inspired by Kato's comments -- one way to approach this problem is to set the priority to the field you want to search on for your autocomplete and use startAt(), limit(), and client-side filtering to return only the results that you want. You'll want to make sure that the priority and the search term is lower-cased, since Firebase is case-sensitive.

This is a crude example to demonstrate this using the Users example I laid out in the question:

For a search for "ja", assuming all users have their priority set to the lowercased version of the user's name:

fb.child('users').
  startAt('ja'). // The user-inputted search
  limitToFirst(20).
  once('value', function(snap) {
    for(key in snap.val()){
      if(snap.val()[key].indexOf('ja') === 0) {
        console.log(snap.val()[key];
      }
    }
});

This should only return the names that actually begin with "ja" (even if Firebase actually returns names alphabetically after "ja").

I choose to use limitToFirst(20) to keep the response size small and because, realistically, you'll never need more than 20 for the autocomplete drop-down. There are probably better ways to do the filtering, but this should at least demonstrate the concept.

Hope this helps someone! And it's quite possible the Firebase guys have a better answer.

(Note that this is very limited -- if someone searches for the last name, it won't return what they're looking for. Hence the "best" answer is probably to use a search backend with something like Kato's Flashlight.)

Answer 2

Based on Jake and Matt's answer, updated version for sdk 3.1. '.limit' no longer works:

firebaseDb.ref('users')
    .orderByChild('name')
    .startAt(query)
    .endAt(`${query}\uf8ff`)
    .limitToFirst(5)
    .on('child_added', (child) => {
      console.log(
          {
            id: child.key,
            name: child.val().name
          }
      )
    })

Answer 3

It strikes me that there's a much simpler and more elegant way of achieving this than client side filtering or hacking Elastic.

By converting the search key into its' Unicode value and storing that as the priority, you can search by startAt() and endAt() by incrementing the value by one.

var start = "ABA";

var pad = "AAAAAAAAAA";
start += pad.substring(0, pad.length - start.length);

var blob = new Blob([start]);

var reader = new FileReader();
reader.onload = function(e) {
    var typedArray = new Uint8Array(e.target.result);
    var array = Array.prototype.slice.call(typedArray);
    var priority = parseInt(array.join(""));
    console.log("Priority of", start, "is:", priority);
}
reader.readAsArrayBuffer(blob);

You can then limit your search priority to the key "ABB" by incrementing the last charCode by one and doing the same conversion:

var limit = String.fromCharCode(start.charCodeAt(start.length -1) +1);
limit = start.substring(0, start.length -1) +limit;

"ABA..." to "ABB..." ends up with priorities of:

Start: 65666565656565650000

End: 65666665656565650000

Simples!

Answer 4

I know this is an old topic, but it's still relevant. Based on Neil's answer above, you more easily search doing the following:

fb.child('tags').startAt(queryString).endAt(queryString + '\uf8ff').limit(5)

See Firebase Retrieving Data.

The \uf8ff character used in the query above is a very high code point in the Unicode range. Because it is after most regular characters in Unicode, the query matches all values that start with queryString.