46 lines
1.3 KiB
JavaScript
46 lines
1.3 KiB
JavaScript
function search_ul_items() {
|
|
const query = document.getElementById('searchbox').value.toLowerCase();
|
|
const ul = document.querySelector('ul'); // only one UL
|
|
if (!ul) return;
|
|
|
|
const items = ul.querySelectorAll('li');
|
|
items.forEach(li => {
|
|
if (li.textContent.toLowerCase().includes(query)) {
|
|
li.style.display = 'list-item';
|
|
} else {
|
|
li.style.display = 'none';
|
|
}
|
|
});
|
|
}
|
|
|
|
// Create search box and insert before the available pages paragraph
|
|
window.addEventListener('DOMContentLoaded', function() {
|
|
const searchDiv = document.createElement('div');
|
|
searchDiv.style.marginBottom = '16px';
|
|
searchDiv.style.paddingLeft = '19px';
|
|
searchDiv.innerHTML = `
|
|
<input
|
|
type="text"
|
|
id="searchbox"
|
|
placeholder="Search pages..."
|
|
style="
|
|
padding: 6px 6px 6px 28px;
|
|
font-size: 1em;
|
|
width: 220px;
|
|
background: url('../../css/icons/search.webp') no-repeat 6px center;
|
|
background-size: 20px 20px;
|
|
"
|
|
title="Search for pages"
|
|
/>
|
|
`;
|
|
const available = document.getElementById('available');
|
|
available.parentNode.insertBefore(searchDiv, available);
|
|
|
|
const searchbox = document.getElementById('searchbox');
|
|
if (searchbox) {
|
|
searchbox.title = "Search for pages";
|
|
searchbox.style.fontStyle = "bold";
|
|
}
|
|
|
|
document.getElementById('searchbox').addEventListener('input', search_ul_items);
|
|
}); |