Bypassing IOS picker element when creating a select element using JavaScript

Replace the native select with a custom dropdown using div elements:

<input type="text" id='search_profile_query' class="focus:outline-none focus:ring-0 focus:border-gray-900 border p-2 rounded-md"> <div id="dropdown-container" class="min-w-0 flex flex-col items-center hidden"> <div id="custom-dropdown" class="min-w-0 text-center absolute overflow-y-auto border-black focus:ring-0 focus:border-black rounded-md bg-white shadow-lg max-h-60" style="display: none;"></div> </div> document.addEventListener('DOMContentLoaded', function() { const searchQueryInput = document.getElementById('search_profile_query'); const customDropdown = document.getElementById('custom-dropdown'); const container = document.getElementById('dropdown-container'); let selectedOption = null; if(searchQueryInput && customDropdown && container){ searchQueryInput.addEventListener('input', function() { const searchTerm = this.value; if (searchTerm.length < 2) { hideDropdown(); return; } fetch(`/get-dropdown-choices/?q=${searchTerm}`) .then(response => response.json()) .then(data => { customDropdown.innerHTML = ''; if (data.choices && data.choices.length > 0) { data.choices.forEach(choice => { const option = document.createElement('div'); option.className = 'px-4 py-2 hover:bg-gray-100 cursor-pointer border-b border-gray-100 last:border-b-0'; option.dataset.value = choice[0]; option.textContent = choice[1]; option.addEventListener('click', function() { searchQueryInput.value = choice[1]; selectedOption = choice[0]; hideDropdown(); // Trigger any additional logic redirect(choice[0]); }); customDropdown.appendChild(option); }); showDropdown(); } else { hideDropdown(); } }) .catch(error => { console.error('Error:', error); hideDropdown(); }); }); // Close dropdown when clicking outside document.addEventListener('click', function(event) { if (!container.contains(event.target) && event.target !== searchQueryInput) { hideDropdown(); } }); // Close dropdown on escape searchQueryInput.addEventListener('keydown', function(event) { if (event.key === 'Escape') { hideDropdown(); } }); } function showDropdown() { customDropdown.style.display = 'block'; container.classList.remove('hidden'); } function hideDropdown() { customDropdown.style.display = 'none'; container.classList.add('hidden'); } function redirect(value) { // Your redirect logic here console.log('Selected:', value); } });