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 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.


  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>

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

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