Want to add a Search Feature to your blog/website? Want to do it using vanilla JavaScript,some node.js and a bit of JQUERY UI?

If the answer to either/both/none of the above questions is yes, Then you have come to the right place.

In this post, we are going to build a search engine using JavaScript, node.js and JQUERY UI Autocomplete widget.

Note that this solution is designed to be used for a jekyll blog, but It can be used with pretty much any portal, where the content is inside a folder structure.

But First things first

Why would You want to build a custom search engine, when there are a million plugins available for jekyll ? 

All the search plugins for jekyll that we came across needed a yml file which indexes the whole blog. This yml file is natively build by jekyll.

Now If you happen to choose to not use this file, none of the search plugins for jekyll would work on your blog. That’s because all the search plugins use this particular yml file to perform search.

Also, almost all the plugins that we came across do not search through the content of the pages. All the search against are the title of the posts.

So to answer the question,

1. We would build a custom Search engine when we do not want to use the index yml file of jekyll.

2. We want to search through the entire content of the posts.

What we are going to do here is, We are going to go through the entire folder structure containing all the posts/pages, and create an index of the entire content of the portal. This index will be a JS object, which will contain the title, url, and content of every page on the portal. The JS object we generate here will be used by the JQUERY UI Autocomplete widget to populate the search results when the user enters a search query.

To demonstrate this, we’ll use a Jekyll blog, which has all the posts in a folder. Let’s call that folder, “posts” (!duh).

Getting Started with going through the portal and Creating an Index of the entire Content

We will create a file site-index-generator . This file will contain the code which will go through the entire folder structure containing all the posts, and will create a JS object which will have the title, url, and the content of every post. We will use JavaScript and Node.js to accomplish this.

Things to notice

Line 18 – In the case of this example, all the posts are in the form of md files. So we are stripping out the extension from the name of the posts. ( We will be using the name of the file, in case title is not present)

Line 34 – Here We are stripping out all the unneeded characters from the content to improve the search performance.

Line 35 – Here we are pushing the path of the post as the property “url” , the title of the post as the property “value”, and the content of the post as the property “label”. The path, title, and content are pushed as the values of the properties of the JS object which will contain the index of our entire portal.  We are doing this because we need to search through the content of the posts, and then display the title/name of the post in the search drop down (using JQUERY UI Autocomplete).

Note – It is important to use the property “label” for the the content, and “value” property for the title. This is because we need to search against the content, and display the title of the posts matching the search query in the drop down, and JQUERY UI Autocomplete widget needs those particular properties to list out the title of the respective posts in the drop-down menu.

Line 50 – Here We are writing the object to a JS file, named site-index.js, and assigning the object to the variable siteIndex .

Line 51 – Here we are specifying the file to parse through the folder “posts” , and to read only files with .md extension.

Note –  The above code is build on top of the npm plugin directory-tree https://www.npmjs.com/package/directory-tree

 

This is How the generated site-index.js  would look

 

 

Displaying the Search Results

Now that we are all set on going through all the content on our portal, and building an index out of it, We need to focus on displaying the Search results when the user type in a query in the Search input box.

The search input box will function as follows

When the user types in a term, We will get a drop-down of all the page titles where that term is present. This will be accomplished by the JQUERY UI Autocomplete widget.

 

 

Here  we are setting up the Autcomplete widget.

Note – You will have to import the jquery-ui.js for Autocomplete to work

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

The source is siteIndex , which is the variable we have assigned to the js object which is getting created.

We are creating a list for the drop-down menu, and appending the value, which is nothing but the title of the posts from the siteIndex .

This was for the drop-down menu.

Now If the user hit enter after typing a search query, they’ll be redirected to a Search Results page, where we’ll display the titles of all the pages where the searched term is present, their url,  and a snippet of the sentence containing the searched term.

 

Now We just need to populate a ul on the search-results.html file

 

 The final output would look something like this

search-results-final

Sorry about all the blurring in the screenshot. It contains some client information.

As you can see, the search result page will have title of the page, the url of the page, and a snippet of the content containing the term searched for.

 

Hope This Helped.