title: Value of selected <datalist> item
body: <p>I am using a <code>&lt;input type='text'&gt;</code> Element together with a <code>&lt;datalist&gt;</code> to provide user name suggestions for a form. Everything works as expected and all my user show up.</p>
  
  <p>However, when the user submits the form I would like select the right user in my data storage based on the input. Unfortunately, names are not unique and there is a chance for duplicates. To avoid this, all my users have a unique ID that is also part of the <code>&lt;datalist&gt;</code>'s <code>&lt;options&gt;</code> tags. </p>
  
  <p>Is there any way I can read anything else but the input's text value? Is there a reference to the selected datalist element? Can I retrieve a user's id based on the text input?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text" class="form-control" name="userName" placeholder="Type a user's name" value="" list="user-datalist" required autofocus&gt;
  
  &lt;datalist id="user-datalist"&gt;
    &lt;option id="53c911ea609252c600632dfe" value="Mr Smith"&gt;Mr Smith&lt;/option&gt;
    &lt;option id="53c911ea60925sdfs4e444eg" value="John Snow"&gt;John Snow&lt;/option&gt;
    &lt;option id="53c911ea6034534535k345th" value="John Snow"&gt;John Snow&lt;/option&gt;
    &lt;option id="53c911ea60925234234234er" value="Mickey Mouse"&gt;Mickey Mouse&lt;/option&gt;
  &lt;/datalist&gt;</code></pre>
  </div>
  </div>
      </p>