Barre de recherche
.search-container { display: flex; margin-bottom: 20px; } .search-container input, .search-container select { padding: 10px; margin-right: 10px; border: 1px solid #ccc; } #results li { list-style-type: none; padding: 10px; border-bottom: 1px solid #eee; } const searchInput = document.getElementById('searchInput'); const categoryFilter = document.getElementById('categoryFilter'); const postalCodeFilter = document.getElementById('postalCodeFilter'); const resultsList = document.getElementById('results'); // Exemple de données (vous pouvez les remplacer par vos propres données) const data = [ { name: 'Restaurant Italien', category: 'restaurant', postalCode: '75001' }, { name: 'Hôtel de Ville', category: 'hotel', postalCode: '69001' }, { name: 'Magasin de chaussures', category: 'magasin', postalCode: '75002' }, { name: 'Restaurant Japonais', category: 'restaurant', postalCode: '69002' }, { name: 'Hôtel du Lac', category: 'hotel', postalCode: '75003' }, { name: 'Magasin de vêtements', category: 'magasin', postalCode: '69003' }, ]; function filterResults() { const searchTerm = searchInput.value.toLowerCase(); const category = categoryFilter.value; const postalCode = postalCodeFilter.value; const filteredResults = data.filter(item => { const nameMatch = item.name.toLowerCase().includes(searchTerm); const categoryMatch = category ? item.category === category : true; const postalCodeMatch = postalCode ? item.postalCode.startsWith(postalCode) : true; return nameMatch && categoryMatch && postalCodeMatch; }); displayResults(filteredResults); } function displayResults(results) { resultsList.innerHTML = ''; results.forEach(item => { const li = document.createElement('li'); li.textContent = `${item.name} (${item.category}, ${item.postalCode})`; resultsList.appendChild(li); }); } // Écouteurs d'événements pour les changements dans les champs de recherche searchInput.addEventListener('input', filterResults); categoryFilter.addEventListener('change', filterResults); postalCodeFilter.addEventListener('input', filterResults); // Affichage initial de tous les résultats displayResults(data);
top of page
bottom of page