Improve search

This new approach makes sure the input field is hidden on browsers which
ignore `display:none`, such as w3m or lynx.

sass/style.scss

@@ -188,7 +188,6 @@ main {
 	}
 
 	input.search {
-		display: none; // Hide for non-js browsers
 		box-sizing: border-box;
 		width: 100%;
 		border: 1px solid #ccc;

static/js/search.js

@@ -1,15 +1,23 @@
-function filter_title(str)
+function filter_title(query, articles)
 {
-	if (str.length == 0) {
-		articles.forEach(article => article.style.display = "block");
-	} else {
-		articles.forEach(article => article.style.display = article.dataset.title.indexOf(str.toLowerCase()) === -1 ? "none" : "block");
+	const search = query.trim().toLowerCase();
+
+	if (search.length === 0) {
+		articles.forEach(article => article.style.display = 'block');
+		return;
 	}
+	articles.forEach(article => {
+		const title = article.dataset.title || '';
+		article.style.display = title.includes(search) ? 'block' : 'none';
+	});
 }
 
+window.addEventListener('DOMContentLoaded', () => {
+	document.querySelector('.search-wrapper').innerHTML =
+		'<input class="search" type="search" placeholder="Search">';
+
 	const search = document.querySelector("input[type='search']");
-const form = document.querySelector("form");
-let articles = Array.from(document.querySelectorAll("article"));
+	const articles = Array.from(document.querySelectorAll('article'));
 
-search.addEventListener("input", () => filter_title(search.value));
-window.addEventListener("load", () => search.style.display = "inline-block");
+	search.addEventListener('input', () => filter_title(search.value, articles));
+});

templates/posts.html

@@ -6,7 +6,7 @@
 
 {% block content %}
 	<h1>{{ section.title }}</h1>
-	<input class="search" type="search" placeholder="Search">
+	<div class="search-wrapper"></div>
 	{{ macros::list_posts() }}
 {% endblock content %}