up style

index.html

@@ -108,7 +108,8 @@
     <form onclick="searchLocation()">
         <!--        <fieldset>-->
         <input type="text" id="searchLocation" placeholder="Rechercher un lieu" class="search-input">
-        <button id="searchButton" class="rounded-button">➤ Ville</button>
+        <button id="searchButton" class="rounded-button">🔍 Rechercher</button>
+        <select id="searchResults" class="search-results" size="5" style="display: none;"></select>
         <!--        </fieldset>-->
     </form>
 

js/lcm_main.js

@@ -823,9 +823,7 @@ function searchFoodPlaces(map) {
 
 // Modifier la fonction init pour ajouter le contrôle des couches
 function init() {
-    // ... existing map initialization code ...
 
-    // Ajouter le groupe de marqueurs à la carte
     food_places_markers.addTo(map);
     $('#found_charging_stations').hide();
 
@@ -860,6 +858,15 @@ function init() {
     $('#searchButton').on('click', searchLocation);
     $('#shareUrl').on('click', copyCurrentUrl);
     
+    
+    $('#searchResults').on('change', function() {
+        const selectedIndex = $(this).val();
+        if (selectedIndex !== null) {
+            const selectedPlace = $(this).find('option:selected').data('place');
+            moveToLocation(selectedPlace);
+        }
+    });
+    
     document.getElementById('searchButton').addEventListener('click', searchLocation);
 }
 
@@ -876,34 +883,51 @@ function copyCurrentUrl() {
     document.body.removeChild(dummy);
 }
  
-function searchLocation(event) {
-    event.preventDefault();
-    event.stopPropagation();
     
-    const location = document.getElementById('searchLocation').value;
+
-    if (!location) {
+    function searchLocation() {
-        alert('Veuillez entrer un lieu à rechercher.');
+        const location = $('#searchLocation').val();
-        return;
+        if (!location) {
+            alert('Veuillez entrer un lieu à rechercher.');
+            return;
+        }
+    
+        const url = `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(location)}`;
+    
+        fetch(url)
+            .then(response => response.json())
+            .then(data => {
+                const resultsDropdown = $('#searchResults');
+                resultsDropdown.empty(); // Clear previous results
+    
+                if (data.length === 0) {
+                    alert('Lieu non trouvé. Veuillez essayer un autre terme de recherche.');
+                    resultsDropdown.hide();
+                } else if (data.length === 1) {
+                    const place = data[0];
+                    moveToLocation(place);
+                    resultsDropdown.hide();
+                } else {
+                    data.forEach((place, index) => {
+                        const option = $('<option></option>')
+                            .val(index)
+                            .text(`${place.display_name} (${place.lat}, ${place.lon})`);
+                        resultsDropdown.append(option);
+                    });
+                    resultsDropdown.show();
+                }
+            })
+            .catch(error => {
+                console.error('Erreur lors de la recherche du lieu :', error);
+                alert('Erreur lors de la recherche du lieu.');
+            });
     }
     
-    const url = `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(location)}`;
+    function moveToLocation(place) {
+        const lat = parseFloat(place.lat);
+        const lon = parseFloat(place.lon);
+        map.setView([lat, lon], 13); // Ajustez le niveau de zoom selon vos besoins
+    }
     
-    fetch(url)
-        .then(response => response.json())
-        .then(data => {
-            if (data.length > 0) {
-                const place = data[0];
-                const lat = parseFloat(place.lat);
-                const lon = parseFloat(place.lon);
-                map.setView([lat, lon], 13); // Ajustez le niveau de zoom selon vos besoins
-            } else {
-                alert('Lieu non trouvé. Veuillez essayer un autre terme de recherche.');
-            }
-        })
-        .catch(error => {
-            console.error('Erreur lors de la recherche du lieu :', error);
-            alert('Erreur lors de la recherche du lieu.');
-        });
-}
 
-init()
+    init()

styles/style.css

@@ -632,4 +632,12 @@ overrides leaflet
   }
 }
 
+.search-results {
+  width: calc(100% - 40px);
+  margin-top: 10px;
+  border: 1px solid var(--button-border);
+  border-radius: 5px;
+  display: none;
+}
+
 /*# sourceMappingURL=style.css.map */