Athenaeum/static/js/search.js
2025-05-24 16:47:32 +02:00

39 lines
1.5 KiB
JavaScript

document.getElementById('searchForm').addEventListener('submit', async (e) => {
e.preventDefault();
const searchTerm = document.getElementById('searchInput').value;
await loadResults(searchTerm);
});
async function loadResults(searchTerm) {
const searchTerm = document.getElementById('searchInput').value;
const sortBy = document.getElementById('sortSelect').value;
try {
const response = await fetch(`/api/ksiazki?search=${encodeURIComponent(searchTerm)}&sort=${sortBy}`);
const books = await response.json();
renderResults(books);
} catch (error) {
console.error('Błąd wyszukiwania:', error);
}
}
['input', 'change'].forEach(event => {
document.getElementById('searchInput').addEventListener(event, loadBooks);
document.getElementById('sortSelect').addEventListener(event, loadBooks);
});
function renderResults(books) {
const container = document.getElementById('search-results');
container.innerHTML = books.map(book => `
<div class="col-md-4">
<div class="card dark-card h-100">
<img src="${book.obraz_url}" class="card-img-top" alt="${book.tytul}">
<div class="card-body">
<h5 class="card-title lobster-font">${book.tytul}</h5>
<p class="card-text inter-font">${book.autor}</p>
<a href="/book.html?id=${book.id}" class="btn btn-gothic">Szczegóły</a>
</div>
</div>
</div>
`).join('');
}