title: Show datalist labels but submit the actual value
body: <p>Currently the HTML5 <code>&lt;datalist&gt;</code> element is supported in most major browsers (except Safari) and seems like an interesting way to add suggestions to an input.</p>
  
  <p>However, there seem to be some discrepancies between the implementation of the <code>value</code> attribute and the inner text on the <code>&lt;option&gt;</code>. For example:</p>
  
  <pre><code>&lt;input list="answers" name="answer"&gt;
  &lt;datalist id="answers"&gt;
    &lt;option value="42"&gt;The answer&lt;/option&gt;
  &lt;/datalist&gt;
  </code></pre>
  
  <p>This is handled differently by different browsers:</p>
  
  <p>Chrome and Opera:<br>
  <img src="https://i.stack.imgur.com/3kdQd.png" alt="Datalist in Chrome/Opera"></p>
  
  <p>FireFox and IE 11:<br>
  <img src="https://i.stack.imgur.com/qtir4.png" alt="Datalist in FireFox"></p>
  
  <p>After selecting one, the input is filled with the value and not the inner text. I only want the user to see the text ("The answer") in the dropdown and in the input, but pass the value <code>42</code> on submit, like a <code>select</code> would.</p>
  
  <p>How can I make all browsers have the dropdown list show the labels (inner text) of the <code>&lt;option&gt;</code>s, but send the <code>value</code> attribute when the form is submitted? </p>