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.


  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="">The Siege of Jadotville</a></li>
  <li><a href="">The Big Short</a></li>
  <li><a href="">The Accountant</a></li>
  <li><a href="">Batman Begins</a></li>
  <li><a href="">Junkyard Wars</a></li>
  <li><a href="">How It’s Made</a></li>
  <li><a href="">Never Back Down</a></li>
  <li><a href="">The Prestige</a></li>
  <li><a href="">Shot Caller</a></li>
  <li><a href="">Cloud Atlas</a></li>


(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) { = "";
      } else { = "none";

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


Count: 10