Lunrjs search on Jekyll website not working with TypeError

Update: Although I still haven't figured this out, I found an alternative that works: Search with Lunr.js | Jekyll Codex

I've been following this CloudCannon Academy tutorial on Jekyll search using lunr.js, but I still haven't get it working after many trials and errors.

When I open Microsoft Edge, my default web browser, I got the following errors in search.js:

       Uncaught TypeError: idx.add is not a function
    at search.js:47:11
    at search.js:57:3

I've been following the tutorial step-by-step, so I basically copied everything from the linked webpage above. What I don't understand is that I certainly have defined idx as the tutorial does. And by checking source code, I have successfully retrieved all the post data and stored them in JSON. What did I do wrong?

For your information, I've attached my code below:

(function() {
  function displaySearchResults(results, store) {
    var searchResults = document.getElementById('search-results');

    if (results.length) { // Are there any results?
      var appendString = '';

      for (var i = 0; i < results.length; i++) {  // Iterate over the results
        var item = store[results[i].ref];
        appendString += '<li><a href="' + item.url + '"><h3>' + item.title + '</h3></a>';
        appendString += '<p>' + item.content.substring(0, 150) + '...</p></li>';

      searchResults.innerHTML = appendString;
    } else {
      searchResults.innerHTML = '<li>No results found</li>';

  function getQueryVariable(variable) {
    var query =;
    var vars = query.split('&');
    for (var i = 0; i < vars.length; i++) {
      var pair = vars[i].split('=');
      if (pair[0] === variable) {
        return decodeURIComponent(pair[1].replace(/\+/g, '%20'));
  var searchTerm = getQueryVariable('query');

  if (searchTerm) {
    document.getElementById('search-box').setAttribute("value", searchTerm);

    // Initalize lunr with the fields it will be searching on. I've given title
    // a boost of 10 to indicate matches on this field are more important.
    var idx = lunr(function () {
      this.field('title', { boost: 10 });

    for (var key in { // Add the data to lunr
        'id': key,

      var results =; // Get lunr to perform a search
      displaySearchResults(results,; // We'll write this in the next section
How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum