Data list is not working in html

Question

I am trying to create a combo using datalist.

This is my div element. Where I am trying to place comboBox. But When I click on the arrow as I given in input or this drop down is not opening.

<div id="chart_line" style="position: relative;">
    <input type="text" id="myInput" onclick="myFunction()" onkeyup="myFunction()" style="width:30%;">
        <div id="triggers">
            <img class="trigger" onclick="deleteValue()" src="css/clearT.png" id="cross">
                <img class="trigger" src="css/combo_arrow.png" id="arrow">
                </div>
                <datalist id="myUL">
                    <option value="United State"/>
                    <option value="United Kingdom"/>
                    <option value="Afghanistan"/>
                    <option value="Aland Islands"/>
                    <option value="Albania"/>
                    <option value="United State"/>
                    <option value="United Kingdom"/>
                    <option value="Afghanistan"/>
                    <option value="Aland Islands"/>
                    <option value="Albania"/>
                    <option value="undefined"/>
                </datalist>
            </div>

Here is my JS Fiddle. Fiddle

Deherrera

which browser use? – Gillmore

Answer 1

Add list="myUL" in your input box and you will be done.

<div id="chart_line" style="position: relative;">
    <input list="myUL" type="text" id="myInput" onclick="myFunction()" onkeyup="myFunction()" style="width:30%;">
        <div id="triggers">
            <img class="trigger" onclick="deleteValue()" src="css/clearT.png" id="cross">
                <img class="trigger" src="css/combo_arrow.png" id="arrow">
                </div>
                <datalist id="myUL">
                    <option value="United State"/>
                    <option value="United Kingdom"/>
                    <option value="Afghanistan"/>
                    <option value="Aland Islands"/>
                    <option value="Albania"/>
                    <option value="United State"/>
                    <option value="United Kingdom"/>
                    <option value="Afghanistan"/>
                    <option value="Aland Islands"/>
                    <option value="Albania"/>
                    <option value="undefined"/>
                </datalist>
            </div>

Introversion

@Deherrera Please check this solution this will help you. – Introversion

Thanks. Is there any way I can select multiple values from datalist – Deherrera

@Deherrera yes, you can. just add "multiple" in the input box. – Introversion

Ya but the problem here is After selection one value other values become hideen, so no point of having multiple. Well Thanks for answer, – Deherrera

'List' attribute instead of 'Name' is the solution – Aciniform

@David, did you get any solution to add multiple values from datalist? – Chapin