40 lines
1.5 KiB
JavaScript
40 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('');
|
||
|
|
}
|