Just want to see the result? Head to https://winstonpuckett.com/blog and click on the search button.

I wanted a meaningful reason for people to visit my "blog" page. It was just a copy of my home page without the excerpt about how I liked good code. I realized a search bar would add a lot to the user experience.

I had only one problem. My entire blog was pre-rendered with 11ty. I wanted a way to grab the tag list without stuffing everything into a JS rendered component. That's when I found custom attributes.

Setting and Getting

Any attribute that starts with "data-" gets saved into the dataset variable for a component. For example:

<p id="element" data-my-variable="value">example</p>

Can be queried like so:

const $el = document.querySelector('#element');
const myValue = $el.dataset.myVariable;

As you can see, the JavaScript can access any attribute with the "data-" prefix from the dataset variable on the node. It automatically translates variable names from kebab-case to camelCase to align with JS standards.

Storing complex types

My next challenge was the limitation on what types you can store in the variable. I had an array of tags that I wanted to store, not a string. Because I am using Liquid templates with 11ty, I was able to insert the array like so:

<div class="card" data-post-tags='{{ post.tag_list }}'></div>

Notice the single quotes so that each double quote in the array is assumed to be part of the string.

Then to access it, I had to parse the array with JSON.parse().

const $card = document.querySelector('.card');
const tags = JSON.parse($card.dataset.postTags);

At that point, the tutorial is more about array methods in JS. I used document.querySelectorAll, filter, and includes to find all of the relevant and not relevant posts based on the search input. It was really easy. I was so grateful to have a way to embed custom tags into html and retrieve them through a simple JS API.

Where to go from here

Go check out the search bar in action: https://winstonpuckett.com/blog.

At this point, none of the JS is minimized, so it's easy to see how everything works in the script tag just above the input. I do store it in a separate JS file, but it is baked into the HTML when you run eleventy.

Want to see the full source code? https://github.com/winstonpuckett/blog