Home » Software Development » Clientside Search With ElasticLunr.js

About Mihai Andronache

Mihai is an experienced Java and JavaEE developer. His main interests are: clean OOP, code maintainability and testing. He is the creator of http://comdor.co and http://charles.amihaiemil.com"

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.

Tom & Jerry – The Truce Hurts, by William Hanna and Joseph Barbera

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
//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:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
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!

Published on Java Code Geeks with permission by MIhai Andronache, partner at our JCG program. See the original article here: Clientside Search With ElasticLunr.js

Opinions expressed by Java Code Geeks contributors are their own.

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. JPA Mini Book

2. JVM Troubleshooting Guide

3. JUnit Tutorial for Unit Testing

4. Java Annotations Tutorial

5. Java Interview Questions

6. Spring Interview Questions

7. Android UI Design

 

and many more ....

 

Receive Java & Developer job alerts in your Area

I have read and agree to the terms & conditions

 

Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments