57 lines
2.3 KiB
PHP
57 lines
2.3 KiB
PHP
<div>
|
|
<div>
|
|
<!-- Champ de recherche -->
|
|
<form method="GET" action="">
|
|
<input type="text" name="query" placeholder="Rechercher..." value="<?= isset($_GET['query']) ? $_GET['query'] : '' ?>">
|
|
</form>
|
|
|
|
<!-- Bouton pour afficher/masquer les filtres -->
|
|
<button type="button" onclick="toggleFilters()">Filtrer</button>
|
|
</div>
|
|
|
|
<!-- Div contenant les filtres, cachée par défaut -->
|
|
<div id="filters" style="display: none;">
|
|
<form method="GET" action="">
|
|
|
|
<!-- Filtre par artiste -->
|
|
<label for="">Artiste : </label>
|
|
<select name="artist" id="artist" onchange="this.form.submit()">
|
|
<option value=''>Tous</option>
|
|
<?php foreach($artistes as $artiste): ?>
|
|
<option value="<?= $artiste->name ?>" <?= isset($_GET['artist']) && $_GET['artist'] == $artiste->name ? 'selected' : '' ?>><?= $artiste->name ?></option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
|
|
<!-- Filtre par genre -->
|
|
<label for="">Genre : </label>
|
|
<select name="genre" id="genre" onchange="this.form.submit()">
|
|
<option value=''>Tous</option>
|
|
<?php foreach($genres as $genre): ?>
|
|
<option value="<?= $genre->name ?>" <?= isset($_GET['genre']) && $_GET['genre'] == $genre->name ? 'selected' : '' ?>><?= $genre->name ?></option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
|
|
<!-- Filtre par ordre -->
|
|
<label for="">Ordre : </label>
|
|
<select name="order" id="order" onchange="this.form.submit()">
|
|
<option value="">Ordre :</option>
|
|
<option value="asc" <?= isset($_GET['order']) && $_GET['order'] == 'asc' ? 'selected' : '' ?>>Croissant</option>
|
|
<option value="desc" <?= isset($_GET['order']) && $_GET['order'] == 'desc' ? 'selected' : '' ?>>Décroissant</option>
|
|
</select>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Fonction pour afficher/masquer les filtres
|
|
function toggleFilters() {
|
|
var filters = document.getElementById('filters');
|
|
if (filters.style.display === 'none') {
|
|
filters.style.display = 'block';
|
|
} else {
|
|
filters.style.display = 'none';
|
|
}
|
|
}
|
|
</script>
|