---
title: "Blog Search with Eleventy"
url: https://daily.dev/posts/blog-search-with-eleventy-46zwaklfm
source_url: https://kittygiraudel.com/2026/05/07/blog-search-with-11ty
type: article
source: "Kitty says hi."
author: "Kitty Giraudel"
published: 2026-05-07T08:50:07.171Z
updated: 2026-05-08T05:00:18.494Z
tags: ["webdev", "javascript", "accessibility"]
reading_time: 7
upvotes: 1
comments: 0
language: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Blog Search with Eleventy

**[Kitty says hi.](https://daily.dev/sources/kittygiraudel)** · [@kittygiraudel](https://daily.dev/kittygiraudel) · 7 min read · 1 upvotes · 0 comments

## Summary

A walkthrough on building a client-side blog search feature with Eleventy. Covers generating a JSON data source from post collections, constructing an accessible search widget using semantic HTML elements like `<search>`, `<form>`, and ARIA attributes (aria-live, aria-busy, aria-controls), and wiring it all together with vanilla JavaScript. Also covers URL synchronization for shareable search links and suggestions for further improvements like fuzzy matching and template elements.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://kittygiraudel.com/2026/05/07/blog-search-with-11ty>

## Similar posts on daily.dev

- [Tag pages with Eleventy](https://daily.dev/posts/tag-pages-with-eleventy-sdqzxtva4) · Kitty says hi. · 1 upvotes · 0 comments
- [Stats Page with Eleventy](https://daily.dev/posts/stats-page-with-eleventy-vbp8zmz7g) · Kitty says hi. · 1 upvotes · 0 comments

---

Tags: [#webdev](https://daily.dev/tags/webdev), [#javascript](https://daily.dev/tags/javascript), [#accessibility](https://daily.dev/tags/accessibility)

[View this post on daily.dev](https://daily.dev/posts/blog-search-with-eleventy-46zwaklfm)