em/em.0x45.cz
1
0
Fork 0
Code Actions Activity

Improve search

Browse Source 
This new approach makes sure the input field is hidden on browsers which
ignore `display:none`, such as w3m or lynx.
This commit is contained in:
Emil Miler
2025-05-14 14:51:49 +02:00
parent a2b355477f
commit b851a127c7
3 changed files with 19 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
static/js/search.js
View File

@ -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 =
'<input class="search" type="search" placeholder="Search">';
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));
});