title: Perform action when clicking HTML5 datalist option
body: <p>I'm using a <code>&lt;datalist&gt;</code></p>
  
  <pre><code>&lt;datalist id="items"&gt;&lt;/datalist&gt;
  </code></pre>
  
  <p>And using AJAX to populate the list</p>
  
  <pre><code> function callServer (input) {
      xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function(){
          if (xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200){
              //return the JSON object
              console.log(xmlhttp.responseText);
              var arr = JSON.parse(xmlhttp.responseText);
              var parentDiv = document.getElementById('items');
              parentDiv.innerHTML = "";
              //fill the options in the document
              for(var x = 0; x &lt; arr.length; x++) {
                  var option = document.createElement('option');
                  option.value = arr[x][0];
                  option.innerHTML = arr[x][1];
                  //add each autocomplete option to the 'list'
                  option.addEventListener("click", function() {
                    console.log("Test");
                  });
                  parentDiv.appendChild(option);
              };
  
          }
      }
      xmlhttp.open("GET", "incl/search.php?value="+input.value, true);
      xmlhttp.send();
  }
  </code></pre>
  
  <p>However I can't get it to perform an action when I click on a selection in the datalist, for example if I type in "Ref F" and the item "Ref flowers" comes up, if I click on it I need to execute an event.</p>
  
  <p>How can I do this?</p>
  
  <pre><code>option.addEventListener("click", function() {
  option.addEventListener("onclick", function() {
  option.addEventListener("change", function() {
  </code></pre>