How to add Search Text Functionality
to your Web Application

Some years ago, before I knew how to code I remember what prompted me on the path was this desire to make an app that had a full text search feature (mainly for an NGO I was working for). At the time I had no idea how to do it but I knew I would need more than HTML and CSS, hence my coding journey began. At the outset, I thought I would have to know the language so well in order to literally make a search engine from scratch, I mean like making binary trees!

However, to my good fortune, I learned it's not at all complicated. Using NPM which is basically a bag of tools that add "special powers" to websites, I found a multitude of options that could get the job done. And so without further ado, let us explore just how easy it is to add custom search using Lunrjs. The good news is that once you know one, you know them all (for the most part). Why? Because a good majority of them (Mini Search, Elastic Search ), work the same way (at least the client-side ones do). Let's Begin!

“Lunrjs - Designed to be small, yet full featured, Lunr enables you to provide a great search experience without the need for external, server-side, search services.”

For this tutorial we will use Visual Studio and Node so make sure you have them installed. First let's open Visual Studio Code and designate a folder for the project to live in. Here we want to open our terminal and run these commands to install the libraries we will need for the project. Type this -->npm install lunr webpack webpack-cli<-- into the terminal and then hit enter. Great! Now I am going to use a list of Movies as the data to be searched. You of course can make your own list or copy what I have here below.

Now the fun part. Let's import the Lunr module using require. And then build our index by using this function here.

                  
                const lunr = require('lunr');

                const index = lunr(function () {
                  this.ref('title')
                  this.field('text')
              
                  documents.forEach(function (doc) {
                      this.add(doc)
                  }, this)
              })
                  
                  
                

This function is where the magic happens, basically it takes the movie data we made and procceses it to produce an index object which contains maps between the content and the title, so that when we use the search function it provides (index.search("japanese")), it will return the references that match the query we give it. Hence the snippet this.ref("title") is basically where we the title as the reference of the content. In other words whatever we assign to this.ref(?) will be returned to us by the index object if there is a match to it's contents when we make a query. And so in this instance, this.ref gets assigned the "title" key. Becuase logically the title should be the point of reference for the content to be searched. Next, the snippet this.field("text") gets assigned the words to be searched. And so in this instance that would be the "text" key of our movie data. And so for example, if we search "japenese", it'll return an array carrying these two movie titles "Akira" and "The Creator". Why? Because in the movie data the text value for these two movies contain the word "japanese". I hope you get what I'm dishing!

Finally we output the data to html with some basic js. And voila we are done.

              
                results.forEach(item => {
                  const d = document.createElement("div")
                  d.style = "display:flex; flex-direction: row;"
                  const title = document.createElement("h3")
                  const text = document.createElement("p")
                  text.style = "flex: .7; "
                  title.style = "flex:     .2; text-align:right; padding-right: 10px"
                  title.textContent = item.ref
                  text.textContent = documents.filter(docItem => docItem.title === title.textContent)[0].text
                  d.appendChild(title)
                  d.appendChild(text)
                  console.log(item);
                  listContainer.appendChild(d)
              })
              
            

You can download an entire copy of the repo here. A full working example is embeded at the top of the page, just enter any word found in the movie data and it should return a list of matches. Now it's important to note that what I covered here is just the bare minimum. There is so much more that can be done to customize the search and further enhance the user experience on your website and/or app. Hope this has helped!

Tumligula class vulputate dis a iaculis praesent

Nulla purus non orci nec nullam aenean molestie tellus libero blandit duis mauris, aliquam faucibus magnis viverra platea mi risus nostra nisl lacus augue placerat diam, suscipit arcu ornare in vivamus elementum maecenas sollicitudin etiam est pretium. Eu platea curabitur laoreet luctus natoque eget cras mus scelerisque aptent, fermentum ligula class vulputate dis a iaculis praesent imperdiet ornare, inceptos auctor neque vestibulum condimentum quisque velit feugiat erat. Fusce tellus facilisis mollis purus augue risus libero cubilia dapibus aliquet, fames imperdiet suscipit himenaeos gravida pellentesque sagittis nullam a, curae cursus praesent sem curabitur fermentum justo commodo dui. Praesent vitae ad laoreet mus luctus litora nec dictum vel class, Nisl vehicula morbi sapien volutpat integer conubia justo sem fermentum cum porta condimentum neque, nibh sodales vulputate donec duis felis class nunc et semper blandit ut. Montes vivamus augue enim curabitur ad orci ut massa parturient feugiat, phasellus proin integer class morbi natoque nisl nunc varius,

Developer

Oliver Saintilien

Nullam varius luctus pharetra ultrices volpat facilisis donec tortor, nibhkisys habitant curabitur at nunc nisl magna ac rhoncus vehicula sociis tortor nist hendrerit molestie integer online service service provide