javascript - 数据列表在 html 中不起作用

Question

我正在尝试使用数据列表创建组合。

这是我的 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 Fiddle。 Fiddle

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>