Blog search feature
This search feature allows visitors to search for titles or summaries (excerpts) of blog posts based on keywords they type.
✨ Purpose of the Feature
The search feature helps users quickly find relevant blog posts just by typing a keyword.
🧩 Main Components
1. Search Input and Button
The following HTML creates an input box and a button used to trigger the search:
<div class="search-container">
<input
type="text"
id="searchBox"
class="search-input"
placeholder="Search blog..."
/>
<button class="search-button" onclick="searchBlog()">Search</button>
</div>
id="searchBox"
→ where users type the keyword.onclick="searchBlog()"
→ when the button is clicked, thesearchBlog()
function is called.
⚙️ How the searchBlog()
Function Works
This function is written in JavaScript and works to filter blog posts based on the title and excerpt.
💻 Function Code
function searchBlog() {
const keyword = document.getElementById("searchBox").value.toLowerCase();
const lang = localStorage.getItem("lang") || "id";
const blogItems = document.querySelectorAll(".blog-item");
blogItems.forEach((item) => {
const itemLang = item.getAttribute("data-lang");
const title = item.querySelector(".blog-title").textContent.toLowerCase();
const excerpt = item
.querySelector(".blog-excerpt")
.textContent.toLowerCase();
const matches = title.includes(keyword) || excerpt.includes(keyword);
item.style.display = matches && itemLang === lang ? "block" : "none";
});
}
🔍 Step-by-Step Explanation
-
Get the Keyword
const keyword = document.getElementById("searchBox").value.toLowerCase();
- Gets the value from the search input.
- Uses
.toLowerCase()
to make the search case-insensitive.
-
Detect Current Language
const lang = localStorage.getItem("lang") || "id";
- Checks the language preference from
localStorage
. - Defaults to
"id"
(Indonesian) if not found.
- Checks the language preference from
-
Get All Blog Items
const blogItems = document.querySelectorAll(".blog-item");
- Selects all blog post elements on the page.
-
Loop and Match
blogItems.forEach((item) => { const itemLang = item.getAttribute("data-lang"); const title = item.querySelector(".blog-title").textContent.toLowerCase(); const excerpt = item .querySelector(".blog-excerpt") .textContent.toLowerCase(); const matches = title.includes(keyword) || excerpt.includes(keyword); item.style.display = matches && itemLang === lang ? "block" : "none"; });
- Gets the
data-lang
attribute of each post to match with the current language. - Gets text content from the title and excerpt.
- Checks if the
keyword
exists in thetitle
orexcerpt
. - If matched and language is correct, show the element (
display: block
), otherwise hide it (display: none
).
- Gets the
🧠 What Does the Search Look For?
This search feature looks for keywords in:
- Blog post titles (
.blog-title
) - Content summaries/excerpts (
.blog-excerpt
)
This feature does not search the full content of the article (
.content
), only the summary shown on the main blog page.
💡 Further Development Tips
- 🔎 Add highlighting to matched search results.
- 📜 Use fuzzy search or a more advanced search algorithm (like Fuse.js).
- 🔄 Add real-time search (trigger as you type, no button click).
- 🌐 Expand search to the full article content if necessary.
✅ Conclusion
This blog search feature works simply but effectively, with:
- Pure JavaScript usage without additional libraries.
- Filtering based on title and excerpt text.
- Language-based filtering using user language preference.
- Improved user experience in finding relevant content.