The problem

I have curated a lot of information on this website and would like to have search functionality to make it easy to retrieve the data.

The solution

The first step is to create an index of all the posts on the website. This could be done automatically with the help of a small Liquid script. The full process is detailed on this blogpost. Copy and paste the following to the root directory of the project in a file named search.json.

---
---
[
  {% for post in site.posts %}
    {

      "title"    : "{{ post.title | strip_html | escape }}",
      "url"      : "{{ site.baseurl }}{{ post.url }}",
      "category" : "{{post.categories | join: ', '}}",
      "tags"     : "{{ post.tags | join: ', ' }}",
      "date"     : "{{ post.date }}",
      "discription" : "{{post.description | strip_html | strip_newlines | escape }}"

    } {% unless forloop.last %},{% endunless %}
  {% endfor %}
]

The above script will automatically create an index of all the posts on the website.

Next, we need to make a search box somewhere on the website and connect that to the search.json index file generated. For this paste the code to the page on which you wish to use search functionallity.

<!-- Html Elements for Search -->
<div class="form-group" id="search-container">
        <input class="form-field" type="text" id="search-input"  placeholder="Search">
        <!-- <span>Search</span> -->
</div>
<div>
    <ul id="results-container"></ul>
</div>

<!-- Script pointing to search-script.js -->
<script src="https://abhigupta.io/assets/js/search_script.js" type="text/javascript"></script>

<!-- Configuration -->
<script>
SimpleJekyllSearch({
  searchInput: document.getElementById('search-input'),
  resultsContainer: document.getElementById('results-container'),
  json: '/search.json'
})
</script>

Add the CSS styling for the form to the assets/css folder and link it to the webpage. Finally add the search_script.js file to the assets/js folder. You can see the script in action here.

References