replace datalist with a custom drop-down list with suggestions when e…

…ntering data
sergeiown · May 29, 2024 · f145959 · f145959
1 parent e032b07
commit f145959
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 30 deletions.
diff --git a/js/dropdown.js b/js/dropdown.js
@@ -15,46 +15,60 @@ export async function createDropdown(map) {
         const searchInput = L.DomUtil.create('input', 'company-search-input', container);
         searchInput.type = 'text';
         searchInput.placeholder = '🔎 Пошук...';
-        searchInput.maxLength = 27;
+        searchInput.maxLength = 30;
 
-        const dataList = L.DomUtil.create('datalist', 'company-datalist', container);
-        dataList.id = 'company-list';
+        const customDropdown = L.DomUtil.create('div', 'custom-dropdown', container);
+        customDropdown.id = 'company-list';
 
-        // Update datalist options based on search input
+        // Update custom dropdown options based on search input
         function updateOptions(filter = '') {
-            dataList.innerHTML = '';
+            customDropdown.innerHTML = '';
 
             companiesData
                 .filter((company) => company.company.toLowerCase().includes(filter.toLowerCase()))
                 .forEach((company) => {
-                    const option = document.createElement('option');
-                    option.value = company.company;
-                    dataList.appendChild(option);
+                    const option = document.createElement('div');
+                    option.className = 'custom-dropdown-item';
+                    option.textContent = company.company;
+                    customDropdown.appendChild(option);
+
+                    option.addEventListener('click', () => {
+                        selectCompany(company);
+                    });
                 });
         }
 
-        updateOptions();
+        function selectCompany(company) {
+            map.flyTo([company.lat, company.lng], 17, { duration: 4 });
+            searchInput.value = '';
+            updateOptions();
+            searchInput.blur();
+        }
 
-        searchInput.setAttribute('list', 'company-list');
+        updateOptions();
 
         searchInput.addEventListener('input', (event) => {
             updateOptions(event.target.value);
+            customDropdown.style.display = 'block';
         });
 
-        searchInput.addEventListener('change', (event) => {
-            const selectedCompany = event.target.value;
+        searchInput.addEventListener('focus', () => {
+            customDropdown.style.display = 'block';
+        });
 
-            const selectedCompanyData = companiesData.find((company) => company.company === selectedCompany);
+        searchInput.addEventListener('blur', () => {
+            setTimeout(() => {
+                customDropdown.style.display = 'none';
+            }, 100);
+        });
 
-            // Clear the input after selection, reset options to the initial state and remove focus from the input field
-            if (selectedCompanyData) {
-                map.flyTo([selectedCompanyData.lat, selectedCompanyData.lng], 17, {
-                    duration: 4,
-                });
-                searchInput.value = '';
-                updateOptions();
-                searchInput.blur();
-            }
+        // Disable map scroll zoom when mouse is over the dropdown
+        customDropdown.addEventListener('mouseenter', () => {
+            map.scrollWheelZoom.disable();
+        });
+
+        customDropdown.addEventListener('mouseleave', () => {
+            map.scrollWheelZoom.enable();
         });
 
         L.DomEvent.disableClickPropagation(container);

diff --git a/js/legend.js b/js/legend.js
@@ -42,7 +42,7 @@ export function addLegend(map) {
 
             legendControl.addTo(map);
 
-            map.on('click', () => {
+            function handleClick() {
                 if (legendControl !== null) {
                     map.removeControl(legendControl);
                     legendControl = null;
@@ -53,7 +53,14 @@ export function addLegend(map) {
                             button.style.display = 'flex';
                         });
                 }
+            }
+
+            map.on('click', handleClick);
+
+            document.querySelectorAll('input').forEach((input) => {
+                input.addEventListener('click', handleClick);
             });
+
             function updateLegendStyle() {
                 if (legendControl !== null) {
                     let shiftAmountRight = '25px';

diff --git a/js/styles.js b/js/styles.js
@@ -43,26 +43,44 @@ export function addStyles() {
         background-color: rgb(255, 255, 255);
         color: black;
         height: 25px;
-        // width: 150px;
+        width: 250px;
         font-weight: bold;
         font-size: 14px;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
         opacity: 0.8 !important;
         padding-left: 10px;
-        margin-bottom: 19px;
     }
 
     .company-search-input::placeholder {
         color: black;
         opacity: 0.8 !important;
     }
 
-    .company-datalist {
-        background-color: rgba(250, 250, 250);
+    .custom-dropdown {
+        position: absolute;
+        top: 40px;
+        left: 0;
+        width: 200px;
+        max-height: 260px;
+        overflow-y: auto;
+        overflow-x: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        border: none;
+        border-radius: 5px;
+        background-color: rgb(250, 250, 250);
+        z-index: 1000;
+        display: none;
     }
     
+    .custom-dropdown-item {
+        padding: 10px;
+        cursor: pointer;
+    }
+    
+    .custom-dropdown-item:hover {
+        background-color: #f0f0f0;
+    }
+
     .leaflet-bar.leaflet-control.custom-button {
         width: 50px;
         height: 50px;