109 lines
3.5 KiB
JavaScript
109 lines
3.5 KiB
JavaScript
(function() {
|
|
if (window.searchInitialized) return
|
|
window.searchInitialized = true
|
|
|
|
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.replaceChildren()
|
|
return
|
|
}
|
|
|
|
searchTimeout = setTimeout(() => {
|
|
fetch('/api/search-quick?q=' + encodeURIComponent(query))
|
|
.then(res => res.json())
|
|
.then(results => {
|
|
if (!results || results.length === 0) {
|
|
searchDropdown.replaceChildren()
|
|
return
|
|
}
|
|
|
|
const searchResults = document.createElement('div')
|
|
searchResults.className = 'search-results'
|
|
|
|
const title = document.createElement('div')
|
|
title.className = 'search-results-title'
|
|
title.textContent = 'Anime'
|
|
searchResults.appendChild(title)
|
|
|
|
results.forEach(r => {
|
|
const item = document.createElement('a')
|
|
item.className = 'search-result-item'
|
|
item.setAttribute('href', '/anime/' + encodeURIComponent(String(r.id || '')))
|
|
|
|
if (isSafeImageUrl(r.image)) {
|
|
const img = document.createElement('img')
|
|
img.className = 'search-result-thumb'
|
|
img.setAttribute('src', r.image)
|
|
img.setAttribute('alt', String(r.title || ''))
|
|
item.appendChild(img)
|
|
} else {
|
|
const noImage = document.createElement('div')
|
|
noImage.className = 'search-result-no-image'
|
|
noImage.textContent = 'no image'
|
|
item.appendChild(noImage)
|
|
}
|
|
|
|
const info = document.createElement('div')
|
|
info.className = 'search-result-info'
|
|
|
|
const itemTitle = document.createElement('div')
|
|
itemTitle.className = 'search-result-title'
|
|
itemTitle.textContent = String(r.title || '')
|
|
info.appendChild(itemTitle)
|
|
|
|
const itemType = document.createElement('div')
|
|
itemType.className = 'search-result-type'
|
|
itemType.textContent = String(r.type || '')
|
|
info.appendChild(itemType)
|
|
|
|
item.appendChild(info)
|
|
searchResults.appendChild(item)
|
|
})
|
|
|
|
const viewAll = document.createElement('a')
|
|
viewAll.className = 'search-result-view-all'
|
|
viewAll.setAttribute('href', '/search?q=' + encodeURIComponent(query))
|
|
viewAll.textContent = 'View all results for ' + query
|
|
searchResults.appendChild(viewAll)
|
|
|
|
searchDropdown.replaceChildren(searchResults)
|
|
})
|
|
.catch(err => console.error('Search error:', err))
|
|
}, 300)
|
|
})
|
|
|
|
searchInput.addEventListener('blur', () => {
|
|
setTimeout(() => {
|
|
searchDropdown.replaceChildren()
|
|
}, 200)
|
|
})
|
|
|
|
document.addEventListener('click', (e) => {
|
|
if (!e.target.closest('.header-search-wrapper')) {
|
|
searchDropdown.replaceChildren()
|
|
}
|
|
})
|
|
}
|
|
|
|
function isSafeImageUrl(rawUrl) {
|
|
if (!rawUrl || typeof rawUrl !== 'string') {
|
|
return false
|
|
}
|
|
|
|
try {
|
|
const parsed = new URL(rawUrl, window.location.origin)
|
|
return parsed.protocol === 'https:' || parsed.protocol === 'http:'
|
|
} catch {
|
|
return false
|
|
}
|
|
}
|
|
})()
|