Add Search Functionality to Your Blog Listing Page

Published: Jun 14, 2020
Updated: Apr 19, 2023

Note: An improved version of this template is available at https://github.com/zwbetz-gh/hugo-client-side-search-template. It supports fuzzy searching and match highlighting.


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

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);
  }
})();