Added city Search instead of select

3 files changed, 44 insertions, 16 deletions

diff --git a/static/js/map.js b/static/js/map.js
index ec6d9b4..a197fdb 100644
--- a/static/js/map.js
+++ b/static/js/map.js
@@ -4,17 +4,6 @@ InitializeMap({
     latitude: 42.8864,
     longitude: -78.8784
 });
-for (var i in cities) {
-    var select = document.getElementById("city_list");
-    var option = document.createElement("option");
-    option.text = cities[i].city;
-    option.value = i;
-    select.add(option);
-}
-document.getElementById("city_list").addEventListener('change', function () {
-    city = cities[this.value]
-    reRenderMap(city);
-});
 
 function InitializeMap(city) {
     map = L.map('map').setView([city.latitude, city.longitude], 12);
diff --git a/static/js/search.js b/static/js/search.js
new file mode 100644
index 0000000..cba7400
--- /dev/null
+++ b/static/js/search.js
@@ -0,0 +1,34 @@
+const citySearch = document.getElementById('citySearch');
+citySearch.addEventListener('keyup', (e) => {
+    const fuse = new Fuse(cities, {
+        keys: ['city'],
+        threshold: 0.3,
+    });
+    const results = fuse.search(e.target.value);
+    if (results.length > 0) {
+        const resultContainer = document.getElementById('result_container');
+        resultContainer.classList.remove('hidden');
+        document.getElementById('results').innerHTML = "";
+        for (var result of results) {
+            const listElement = document.createElement('li');
+            listElement.classList.add('flex', 'items-center', 'space-x-2', 'py-2', 'px-4', 'relative', 'w-full', 'hover:bg-blue-600', 'hover:text-white', 'cursor-pointer', 'resultCity');
+            listElement.setAttribute('latitude', result.item.latitude);
+            listElement.setAttribute('longitude', result.item.longitude);
+            listElement.innerHTML = `<span class="text-sm font-semibold">${result.item.city}</span>`;
+            listElement.addEventListener('click', (e) => {
+                citySearch.value = e.target.innerText;
+                resultContainer.classList.add('hidden');
+                city = {
+                    city: e.target.innerText,
+                    latitude: e.target.getAttribute('latitude'),
+                    longitude: e.target.getAttribute('longitude')
+                };
+                reRenderMap(city);
+                console.log(city);
+            });
+            document.getElementById('results').appendChild(listElement);
+        }
+    } else {
+        document.getElementById('result_container').classList.add('hidden');
+    }
+});
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 65068a9..170de98 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -30,11 +30,14 @@
                 </p>
 
                 <nav data-dev-hint="main navigation">
-                    <p class="flex items-center space-x-2 py-2 px-4">
-                        <select class="px-4 py-3 rounded-full bg-gray-600 w-full" id="city_list">
-                            <option selected value="None">Choose a City</option>
-                        </select>
-                    </p>
+                    <div class="flex items-center space-x-2 py-2 px-4 relative w-full">
+                        <input type="text" class="bg-gray-600 rounded w-full p-3" placeholder="Search for a city..."
+                            id="citySearch" autocomplete="off" />
+                        <div id="result_container"
+                            class="absolute w-full p-3 bg-white top-14 -left-2 text-black max-h-64 overflow-y-auto hidden">
+                            <ul id="results" class="list-reset h-full block"></ul>
+                        </div>
+                    </div>
                     <p class="flex items-center space-x-2 py-2 px-4"><span><strong>Start Date: </strong></span><input
                             type="date" class="rounded bg-gray-600 w-full" /><span></p>
                     <p class="flex items-center space-x-2 py-2 px-4"><strong>End Date: </strong></span><input
@@ -72,5 +75,7 @@
     const cities = JSON.parse('{{cities_list | tojson}}');
 </script>
 <script src="../static/js/map.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
+<script src="../static/js/search.js" defer></script>
 
 </html>
\ No newline at end of file