diff options
Diffstat (limited to 'static/js')
| -rw-r--r-- | static/js/map.js | 11 | ||||
| -rw-r--r-- | static/js/search.js | 34 |
2 files changed, 34 insertions, 11 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 |