数据列表在html中不起作用

Question

我正在尝试使用datalist创建一个组合.

这是我的div元素.我在哪里尝试放置comboBox.但是当我点击输入中给出的箭头时,或者这个下拉菜单没有打开.

<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>

这是我的JS小提琴. 小提琴

Answer 1

添加list="myUL"到输入框中即可完成.

<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>