This new approach makes sure the input field is hidden on browsers which ignore `display:none`, such as w3m or lynx.
24 lines
731 B
JavaScript
24 lines
731 B
JavaScript
function filter_title(query, articles)
|
|
{
|
|
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 articles = Array.from(document.querySelectorAll('article'));
|
|
|
|
search.addEventListener('input', () => filter_title(search.value, articles));
|
|
});
|