title: Get the data-id of the selected option in a datalist
body: <p>Ok, I have the following HTML source:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;form method="post" action="/" id="search"&gt;
    &lt;input list="animals" name="animal"&gt;
      &lt;datalist id="animals"&gt;
        &lt;option label="Alaskan Malamute" data-id="d8c" value="Dog"&gt;
        &lt;option label="Siberian Husky" data-id="w30" value="Dog"&gt;
        &lt;option label="Aegean" data-id="rxx" value="Cat"&gt;
      &lt;/datalist&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And the JS
  </p>
  
  <pre><code>function doKeyUp(e) {
    if (e.preventDefault) e.preventDefault();
  
    if(e.keyCode == 37 || e.keyCode == 38 || e.keyCode == 39 || e.keyCode == 40 ) {return;}
  
    var input = document.getElementById("animal");
    var search_after = input.value.trim();
    var form = document.getElementsByTagName("form")[0];
  
    var datalist = document.getElementsByTagName('datalist')[0];
  
    if (search_after.length &gt;= 2) {
  
      if (e.keyCode == 13 &amp;&amp; search_after.length &gt;= 3) {
        var id = "value of data-id";
        // How to obtain and submit the `data-id` of the selected option.
        document.getElementById("search").submit();
      }
    }
  }  // dokeyup
  
  
  
  document.addEventListener("DOMContentLoaded", function(event) {
    document.getElementById("search").onsubmit = function (e) {
      console.log("SUBMIT");
      return false;
    };
  
    document.addEventListener( "keyup", doKeyUp, true);
  });
  </code></pre>
  
  <p>When the user then selects an option, how do I get the <code>data-id</code> of the selected <code>&lt;option&gt;</code> - which is the actual data I want to submit and process on the server side.</p>
  
  <p>This is a project where I'm trying to write everything by my self, no jQuery this time.</p>
  
  <p>Know I can do <code>console.log(datalist.options[1]);</code>, but can not figure how I obtain the selected index.</p>
  
  <p>Update March 4:
  Must ask again, no one who has any tips for me ?</p>
  
  <p>Still not figured this out, and have really run out of ideas...
  The last I've tried stopped at, before the form submission:</p>
  
  <pre class="lang-js prettyprint-override"><code>for (var i=0; i&lt;document.getElementById('animals').options.length; i++) {
      if (document.getElementById('animals').options[i].value == document.getElementsByName("animal")[0].value) {
          var id = document.getElementById('animals').options[i].getAttribute('data-id');
          break;
      }
  }
  </code></pre>
  
  <p>Is it in any way possible to get the selected index of the chosen option - or am I still on the wrong path ?
  This above stops at the first element, anyway.</p>