データリストが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

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>