Step-by-Step Guide: Implementing Search in Bear Blog
Tags: bear, development, blog
Published: 2024-06-12 05:17:19

---
title: Step-by-Step Guide: Implementing Search in Bear Blog
published: true
description: Learn how to enhance your Bear blog with a custom search feature. Follow our simple step-by-step guide to add a search bar, making it easier for readers to find specific posts.
tags: Bear, Development, Blog
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/721989w4dc8h5zn7qym8.png
# Use a ratio of 100:42 for best results.
# published_at: 2024-06-12 07:17 +0000
---

[Bear](tab:https://bearblog.dev/) is an awesome platform designed for people who want to focus on blogging. It provides everything you need to write blog posts without distractions. Or "no-nonsense," as they say at Bear.

Since Bear is focused on just blogging, you might find it lacks some features that other platforms offer. That's the trade-off you make when prioritizing minimalism and speed. Luckily, with some development skills, you can easily add those features yourself!

One of these features is the ability to search through your blog posts on the blog overview page.

**If you only came here to add this custom feature to your own Bear blog, follow the steps below.**

1. Copy the following script:
       ```html
	<script src="https://cdn.jsdelivr.net/gh/froodooo/bear-plugins@0.0.5/bear/blog-search.js"></script>
	```
	*(See [my bear-plugins GitHub repository](tab:https://github.com/Froodooo/bear-plugins) for the latest release number)*
2. From your Bear blog dashboard, click on your blog name, then on *Settings*, then on *Header and footer directives*, and paste the above script in the *Footer directive*.

... and you're done! Go to the blog overview page on your website. It now has a search input field at the top. This input field filters all your blog posts and only shows those whose titles contain your search query.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q3ke1pymqqf5ycsmt997.png)

For everyone who want to know more or prefer to host the code themselves instead of using my GitHub repository, read on.
# The Technical Details
Let's start with the content of `blog-search.js`. Take a look:

```javascript
if (document.querySelector(".blog-posts") && document.body.classList.contains("blog")) {
  document.querySelector("main").insertBefore(
    Object.assign(
      document.createElement("input"), {
      type: "text",
      id: "searchInput",
      placeholder: "Search...",
      style: "display: block;",
      oninput: (event) => {
        document.querySelectorAll(".blog-posts li").forEach((post) => {
          post.style.display = post.textContent.toLowerCase().includes(event.target.value.toLowerCase()) ? "" : "none";
        })
      }
    }),
    document.querySelector(".blog-posts")
  );
}
```

Let me walk you through it.

The `if` statement checks if we're on a page that contains an element with the class `blog-posts`, which should be true for the blog overview page.

Next, we look for the `<main>` tag and add a text `input` field to it. We give this input field an id, a placeholder value, and an `oninput` event that triggers whenever someone types in the text field. When that happens, we take the search query and hide all blog titles that do not include this search query.

Instead of using my default script hosted on the jsDelivr CDN, you can copy and paste the full script in the footer directive of your Bear blog in between `<script>` tags.

One note about the code: you might have noticed the lack of variables that would increase readability. I chose to use as few custom variables as possible to avoid conflicts with variables in other scripts you might have included in your blog. Not using custom variables minimizes this risk.

If you have any questions or comments, please contact me via [email](mailto:blog@yordi.me) or on [Mastodon](tab:https://social.lol/@yordi).

*Kudos for the initial version of this code go to [Herman](tab:https://herman.bearblog.dev/), creator of Bear.*