Tengo un input type="text" vinculado a una datalist de datos y un button al lado.
Estoy tratando de abrir la lista de datos cuando se hace clic en el botón (como si se hiciera clic en el cuadro de entrada).
¿Cómo puedo lograr eso? parece que no hay una solución simple para esto, ¿debería usar algo que no sea una lista de datos para que sea más fácil y más compatible con los navegadores?
input::-webkit-calendar-picker-indicator { display: none; } <input type="text" list="lst" name="input1" /> <button>open list</button><br> <input type="text" list="lst" name="input2" /> <button>open list</button> <datalist id="lst"> <option value="a"></option> <option value="b"></option> <option value="c"></option> </datalist> let BTN = document.querySelector('button'), List = document.querySelector('datalist'), selectBox = document.querySelector('select'), input = document.querySelector('input'), options = selectBox.options; BTN.onclick = ()=>{ if (List.style.display === '') { List.style.display = 'block'; BTN.textContent = "close list"; let val = input.value; for (let i = 0; i < options.length; i++) { if (options[i].text === val) { selectBox.selectedIndex = i; break; } } } else HideSelectBox(); } selectBox.addEventListener('change', ()=>{ input.value = options[selectBox.selectedIndex].value; HideSelectBox(); }); input.addEventListener('focus', HideSelectBox); function HideSelectBox () { List.style.display = ''; BTN.textContent = "open list"; } select { width: 185px; } datalist { display: none;} option { padding: 3px; } option:hover { background-color: #cccc; } input::-webkit-calendar-picker-indicator { display: none; } <label> <input list='lst'> </label> <button>open list</button> <datalist id="lst"> <label> <select multiple size=3> <option value="a">a <option value="b">b <option value="c">c </select> </label> </datalist>