..
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50 | 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');
try {
document.getElementById('results').innerHTML = "";
} catch (e) {
// Create the results container
const results = document.createElement('ul');
results.id = 'results';
results.classList.add('list-reset', 'h-full', 'block');
resultContainer.appendChild(results);
}
for (var result of results) {
const listElement = document.createElement('li');
listElement.classList.add('flex', 'text-gray-900', 'items-center', 'py-2', 'px-4', 'relative', 'w-full', 'hover:bg-indigo-600', 'hover:text-white', 'cursor-pointer', 'rounded-lg');
listElement.setAttribute('latitude', result.item.latitude);
listElement.setAttribute('longitude', result.item.longitude);
listElement.setAttribute('cityId', result.item.cityId);
listElement.innerHTML = `<span class="text-sm font-semibold">${result.item.city}</span>`;
listElement.addEventListener('click', (e) => {
citySearch.removeAttribute('data-city-id');
citySearch.value = e.target.innerText;
citySearch.setAttribute('data-city-id', e.target.getAttribute('cityId'));
citySearch.setAttribute('data-latitude', e.target.getAttribute('latitude'));
citySearch.setAttribute('data-longitude', e.target.getAttribute('longitude'));
resultContainer.classList.add('hidden');
resultContainer.innerHTML = "";
city = {
city: e.target.innerText,
latitude: e.target.getAttribute('latitude'),
longitude: e.target.getAttribute('longitude')
};
reRenderMap(city);
document.getElementById('rangeContainer').classList.add('hidden');
$rangeInput = $('.range input');
$rangeInput.val(1).trigger('input');
});
document.getElementById('results').appendChild(listElement);
}
} else {
document.getElementById('result_container').classList.add('hidden');
}
});
|
|
