My jekyll/github website got error when i try to search

Question

i am a non-tech student trying to build a website for my project. I came across this amazing template called beautiful-jekyll and it works so well so far. However, when i try to implement a search engine based on this tutorial https://learn.cloudcannon.com/jekyll/jekyll-search-using-lunr-js/ it didn't work but keep giving me the error page. My template code is at https://github.com/nhatdang1411/nhatdang1411.github.io Here is some code that i add to implement the search bar based on the given instruction

(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 = window.location.search.substring(1);
    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('id');
      this.field('title', { boost: 10 });
      this.field('author');
      this.field('category');
      this.field('content');
    });

    for (var key in window.store) { // Add the data to lunr
      idx.add({
        'id': key,
        'title': window.store[key].title,
        'author': window.store[key].author,
        'category': window.store[key].category,
        'content': window.store[key].content
      });

      var results = idx.search(searchTerm); // Get lunr to perform a search
      displaySearchResults(results, window.store); // We'll write this in the next section
    }
  }
})();

I am sorry because i cannot provide further detail about my code because i am a non-tech student. If you can take a look at my code on my github page and give me some advice how to fix this, it will mean the world to me. My search box is at nhatdang1411.github.io

Instead of implying people should visit your GitHub Pages site to see the error for themselves, please include the exact error text here in the body of your question. Without it, once you ostensibly fix the code or other issue that's generating the error, future visitors to this question won't be able to derive nearly as much value from your question and the subsequent answers. — esqew, Dec 08 '20 at 03:23
Additionally, I find the statement "*i cannot provide further detail about my code because i am a non-tech student*" a bit peculiar - do you mind elaborating on this thought a bit further? Plenty of contributors here on Stack Overflow and elsewhere who would not describe themselves as "tech[nical] students" are more often than not able to provide all pertinent details of their code that they've written. — esqew, Dec 08 '20 at 03:24

score 0 · Answer 1 · answered Dec 18 '20 at 21:19

The Lunr library has been updated since that tutorial was written (see the docs for details). You will need to update the lunr function inside your searchTerm conditional. The for loop needs to be included in that function per the updates:

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('id');
    this.field('title', { boost: 10 });
    this.field('author');
    this.field('category');
    this.field('content');

    for (var key in window.store) { // Add the data to lunr
      this.add({
        'id': key,
        'title': window.store[key].title,
        'author': window.store[key].author,
        'category': window.store[key].category,
        'content': window.store[key].content
      });
    }

  });

  var results = idx.search(searchTerm); // Get lunr to perform a search
  displaySearchResults(results, window.store); // We'll write this in the next section

}

My jekyll/github website got error when i try to search

1 Answers1