diff --git a/sass/style.scss b/sass/style.scss index 79d1703..7c10809 100644 --- a/sass/style.scss +++ b/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; diff --git a/static/js/search.js b/static/js/search.js index e286f82..f1e5443 100644 --- a/static/js/search.js +++ b/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'; + }); } -const search = document.querySelector("input[type='search']"); -const form = document.querySelector("form"); -let articles = Array.from(document.querySelectorAll("article")); +window.addEventListener('DOMContentLoaded', () => { + document.querySelector('.search-wrapper').innerHTML = + ''; -search.addEventListener("input", () => filter_title(search.value)); -window.addEventListener("load", () => search.style.display = "inline-block"); + const search = document.querySelector("input[type='search']"); + const articles = Array.from(document.querySelectorAll('article')); + + search.addEventListener('input', () => filter_title(search.value, articles)); +}); diff --git a/templates/posts.html b/templates/posts.html index e7dce29..72abf8e 100644 --- a/templates/posts.html +++ b/templates/posts.html @@ -6,7 +6,7 @@ {% block content %}

{{ section.title }}

- +
{{ macros::list_posts() }} {% endblock content %}