Skip to main content

Add Search Functionality to Your Blog Listing Page

Published: 2020-06-14 • Last updated: 2021-05-03

WARNING: THIS POST IS DEPRECATED. Instead, see Build a Search Bar for Your Hugo Blog With a JSON Index and Some Vanilla JS

This is something that I recently added to my uswds hugo theme. I’m documenting it here for others, and to remind myself in the future. Code samples and a demo are below. In a nutshell, here’s how it works:

A text input element is used for searching, and a paragraph element holds the list count. It’s assumed that your blog posts, or whatever content it happens to be, are in a plain old unordered list element, aka a ul.

The js code is wrapped in a Immediately Invoked Function Expression so that the global scope is not polluted.

A function is defined that updates the count, updateCount. Another function is defined that runs when an event happens, onEvent, which does a few things

  • Gets the entered search term then converts it to uppercase
  • Gets the list element
  • For each list item in the list, convert the inner text to uppercase, then compare it to the entered search term. If they match, show that list item, and increment a counter. If they don’t match, hide that list item
  • Call updateCount with the counter

Lastly, the text input is grabbed by id. If it exists, then an event listener is added that calls onEvent on every keyup event.

# HTML

<input
  id="sample-search"
  type="text"
  placeholder="Search movies by title..."
  aria-label="Search movies by title"
/>

<p id="sample-list-count">Count: 10</p>

<ul id="sample-list">
  <li><a href="https://en.wikipedia.org/wiki/The_Siege_of_Jadotville_(film)">The Siege of Jadotville</a></li>
  <li><a href="https://en.wikipedia.org/wiki/The_Big_Short_(film)">The Big Short</a></li>
  <li><a href="https://en.wikipedia.org/wiki/The_Accountant_(2016_film)">The Accountant</a></li>
  <li><a href="https://en.wikipedia.org/wiki/Batman_Begins">Batman Begins</a></li>
  <li><a href="https://en.wikipedia.org/wiki/Scrapheap_Challenge">Junkyard Wars</a></li>
  <li><a href="https://en.wikipedia.org/wiki/How_It%27s_Made">How It’s Made</a></li>
  <li><a href="https://en.wikipedia.org/wiki/Never_Back_Down">Never Back Down</a></li>
  <li><a href="https://en.wikipedia.org/wiki/The_Prestige_(film)">The Prestige</a></li>
  <li><a href="https://en.wikipedia.org/wiki/Shot_Caller_(film)">Shot Caller</a></li>
  <li><a href="https://en.wikipedia.org/wiki/Cloud_Atlas_(film)">Cloud Atlas</a></li>
</ul>

# JavaScript

(function () {
  function updateCount(count) {
    var listCount = document.getElementById("sample-list-count");
    listCount.innerText = "Count: " + count;
  }

  function onEvent() {
    var count = 0;
    var filter = search.value.toUpperCase();
    var list = document.getElementById("sample-list");
    var listItems = list.getElementsByTagName("li");
    for (i = 0; i < listItems.length; i++) {
      var item = listItems[i];
      var text = item.innerText.toUpperCase();
      if (text.indexOf(filter) > -1) {
        item.style.display = "";
        count++;
      } else {
        item.style.display = "none";
      }
    }
    updateCount(count);
  }

  var search = document.getElementById("sample-search");
  if (search) {
    search.addEventListener("keyup", onEvent);
  }
})();

# Demo

Count: 10