Clientside Search With ElasticLunr.js

Any blog or documentation website needs Search functionality. You can achieve this in many ways, and most likely a server-side solution will be chosen. However, if you don’t want to deal with any backend, you can implement it all on the clientside, thanks to lunr.js.

I first discovered Lunr.js a few years ago, but I didn’t use it since I decided to go with a server-side option (I needed the dynamic content to be intexed as well). A few weeks ago, however, I’ve decided to go with the client-side approach and I found ElasticLunr.JS which is basically a wrapper over Lunr.js, to make things easier.

Creating the Index, is as easy as (courtesy of ElasticLunr.com):

//declare the index and its format
var index = elasticlunr(function () {
    this.addField('title');
    this.addField('body');
    this.setRef('id');
});

//add content to the index
var documentToIndex = {
    "id": 1,
    "title": "Oracle released its latest database Oracle 12g",
    "body": "Yestaday Oracle has released its new database Oracle 12g, this would make more money for this company and lead to a nice profit report of annual year."
}
index.addDoc(documentToIndex);

Searching is as easy as follows:

var resultsJsonArray = index.search("oracle");
//this will return a JsonArray with the following format:

[
  0: {
      ref: "4"
      score: 3.4764451146882474
      doc: {
          id: 1
          title: "Oracle released its latest database Oracle 12g"
          body: "Yestaday Oracle has released its new database Oracle 12g, this would make more money for this company and lead to a nice profit report of annual year."
          }
     }
]

If you have a Jekyll blog, like this one, you can use Liquid syntax to index all your posts. Here is how I created the Index for this blog.

Now, for the actual Search, I needed a “front-end”, a search widget. Since ElasticLunr.js doesn’t provide such a tool, I wrote my own. Well, actually I didn’t create it from scratch, I’ve refactored the existing Search Widget I had for server-side searching. And, in the process of this refactoring, I’ve learned what “Aging Software” actually means. It’s a simple ReactJS widget, with about 5 components and only a few dependencies: after 3 years of not working on it at all, running npm install suddenly showed about 400 (!) warnings and erros. I had left the project with a green build badge and when I came back to it, without doing anything, it suddenly exploded.

Why did I dismiss server-side searching? It used to work fine for me, I even wrote my own Github chatbot for indexing and searching Github Pages content. I dismissed it because it became expensive to keep it up (I think I’ve run out of Free Tiers on all Cloud providers) and, besides that, the product didn’t manage to attract users.

To conclude, if you have a similar use-case, I strongly suggest you look into lunr.js and/or elasticlunr.js. Also, you can reuse my Search Widget!