Adding "Filter as you type" Support to IndexedDB

one truly disappointing aspect of indexeddb is that there is no (simple) support for search across your data. it is very much based on the idea of knowing your keys and fetching data based on those keys. you can easily retrieve the "ray" user object, but you can't search for user objects that have an age within a certain range and a skill property of so and so. that's not to imply you can't do some sorting and filtering though.

indexeddb supports the idea of key range objects . as you can probably guess, these allow you return objects based on a range of values that match with a particular index. remember that indexeddb objects can have any number of properties, but you have to specify which are indexed. and now you know a good reason why - it gives you a chance to filter later on.

ranges can go in either direction and can be inclusive or exclusive. by that i mean, you can say "anything object with a name 'above' and including barry" or "anything object with a name 'below' zelda but not including that name." you can also combine both and get a single object too.

for my use-case, i wanted to use a range filter so that i could support 'filter as you type'. my data consists of notes that include a title, body, and created property. i'm not going to go through the steps of setting that up as my previous blog entries (linked at the bottom) went over most of the detail there. instead, let's focus on how i built in the 'filter as you type' metaphor.

to begin with, i had a function that handled "get all" and displaying the data. it worked by opening a cursor and looping while data existed. here's how that version looked:

 function displaynotes() {
        var transaction = db.transaction(["note"], idbtransaction.read);
        var content="<ul>";
        transaction.oncomplete = function(event) {
            console.log("all done!");
            $("#notelist").html(content);
        };
        transaction.onerror = function(event) {
          // don't forget to handle errors!
          console.dir(event);
        };
        var objectstore = transaction.objectstore("note");
        objectstore.opencursor().onsuccess = function(event) {
          var cursor = event.target.result;
          if (cursor) {
            content += "<li data-key=\""+cursor.key+"\"><span class=\"label\">"+cursor.value.title+"</span>";
            content += " <a class=\"delete\">[delete]</a>";
            content +="</li>";
            cursor.continue();
          }
          else {
            content += "</ul>";
            console.log("done with cursor");
          }
        };
    }

in order to support a bound range, you have to change how you open your object store (remember, think of this like a database table). when we just get everything, we run opencursor on the objectstore (line 18 above). when we want a bound list of data, we get an index first (this is the property we said we wanted to be able to filter on), create the range, and then open a cursor on that. so with a small amount of work, we can update our displaynotes function to take an optional filter. (note that i also switched to a table display. the change in html isn't terribly important here so i won't cover it.)

function displaynotes(filter) {

        var transaction = db.transaction(["note"], idbtransaction.read);
        var content="<table class='table table-bordered'><thead><tr><th>title</th><th>created</th><th> </td></thead><tbody>";

        transaction.oncomplete = function(event) {
            $("#notelist").html(content);
        };

        transaction.onerror = function(event) {
          // don't forget to handle errors!
          console.dir(event);
        };

        var handleresult = function(event) {
          var cursor = event.target.result;
          if (cursor) {
            content += "<tr data-key=\""+cursor.key+"\"><td class=\"notetitle\">"+cursor.value.title+"</td>";
            content += "<td>"+dtformat(cursor.value.created)+"</td><td><a class=\"btn btn-danger delete\">delete</a></td>";
            content +="</tr>";
            cursor.continue();
          }
          else {
            content += "</tbody></table>";
            console.log("done with cursor");
          }
        };

        var objectstore = transaction.objectstore("note");

        if(filter) {
            console.log("need to make a range on "+filter);
            //credit: http://stackoverflow.com/a/8961462/52160
            var range = idbkeyrange.bound(filter, filter + "z");
            var index = objectstore.index("title");
            index.opencursor(range).onsuccess = handleresult;
        } else {
            console.log("not making a range");
            objectstore.opencursor().onsuccess = handleresult;
        }
        
            
    }

focus on lines 31 to 40. you can see the different ways to open the cursor. note specifically we do our binding based on an input string, like "ra" and append "z" to give an end to the range. so typing in "ra" means we want all notes with a title from "raa" to "raz".

outside of that - the code is identical. i moved the success portion into a new inner function (handleresult), but it works the same no matter how i get the cursor itself.

you can demo this yourself by hitting the demo button below, but as before, this is firefox only due to - what i believe - is a bad implementation in chrome. (i think it could be made to work in chrome, but as i'm building these examples to help me learn more about indexeddb, i'm fine supporting the most compatible browser.)

you can find the complete source by .... viewing source. ;)