63 lines
2.0 KiB
JavaScript
63 lines
2.0 KiB
JavaScript
let searchTimeout;
|
|
const searchInput = document.getElementById('search-input');
|
|
const searchDropdown = document.getElementById('search-dropdown');
|
|
|
|
if (searchInput) {
|
|
searchInput.addEventListener('input', function(e) {
|
|
clearTimeout(searchTimeout);
|
|
const query = e.target.value.trim();
|
|
|
|
if (query.length < 2) {
|
|
searchDropdown.innerHTML = '';
|
|
return;
|
|
}
|
|
|
|
searchTimeout = setTimeout(() => {
|
|
fetch('/api/search-quick?q=' + encodeURIComponent(query))
|
|
.then(res => res.json())
|
|
.then(results => {
|
|
if (!results || results.length === 0) {
|
|
searchDropdown.innerHTML = '';
|
|
return;
|
|
}
|
|
|
|
let html = '<div class="search-results">';
|
|
html += '<div class="search-results-title">Anime</div>';
|
|
results.forEach(r => {
|
|
html += `
|
|
<a href="/anime/${r.id}" class="search-result-item">
|
|
${r.image ? `<img src="${r.image}" alt="${r.title}" class="search-result-thumb" />` : '<div class="search-result-no-image">no image</div>'}
|
|
<div class="search-result-info">
|
|
<div class="search-result-title">${escapeHtml(r.title)}</div>
|
|
<div class="search-result-type">${r.type}</div>
|
|
</div>
|
|
</a>
|
|
`;
|
|
});
|
|
html += `<a href="/search?q=${encodeURIComponent(query)}" class="search-result-view-all">View all results for ${escapeHtml(query)}</a>`;
|
|
html += '</div>';
|
|
searchDropdown.innerHTML = html;
|
|
})
|
|
.catch(err => console.error('Search error:', err));
|
|
}, 300);
|
|
});
|
|
|
|
searchInput.addEventListener('blur', () => {
|
|
setTimeout(() => {
|
|
searchDropdown.innerHTML = '';
|
|
}, 200);
|
|
});
|
|
|
|
document.addEventListener('click', (e) => {
|
|
if (!e.target.closest('.header-search-wrapper')) {
|
|
searchDropdown.innerHTML = '';
|
|
}
|
|
});
|
|
}
|
|
|
|
function escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|