diff options
| -rw-r--r-- | static/js/map.js | 11 | ||||
| -rw-r--r-- | static/js/search.js | 34 | ||||
| -rw-r--r-- | templates/index.html | 15 |
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 |