how to open datalist associated to an input on button click

user_2401856 0
Viewed 316

I have an input type="text" linked to a datalist and a button next to it.
I'm trying to open the datalist when the button is clicked (as if the input box was clicked).
how can I acheive that? it seems like there's no simple solution for this, should I use something other than datalist to make it easier and more supported by browsers?

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>

html javascript
1 Answers

   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>

user_160629320
Related