I am trying to create a bo using datalist.

This is my div element. Where I am trying to place boBox. 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/bo_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

I am trying to create a bo using datalist.

This is my div element. Where I am trying to place boBox. 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/bo_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

• javascript
• html
• css
• datalist

• which browser use? – Chirag Patel Commented Jun 26, 2017 at 7:42

1 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/bo_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>