title: How to display only the text in datalist HTML5 and not the value?
body: <p>Here is an example:</p>
  
  <pre><code>&lt;input list="browsers" name="browser"&gt;
  &lt;datalist id="browsers"&gt;
      &lt;option value="Internet Explorer"&gt;1&lt;/option&gt;
      &lt;option value="Firefox"&gt;2&lt;/option&gt;
      &lt;option value="Chrome"&gt;3&lt;/option&gt;
      &lt;option value="Opera"&gt;4&lt;/option&gt;
      &lt;option value="Safari"&gt;5&lt;/option&gt;
  &lt;/datalist&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/j7ehtqjd/1/" rel="noreferrer">http://jsfiddle.net/j7ehtqjd/1/</a> </p>
  
  <p>What I want to achieve is when I click on the input element the <em>value</em> would not be displayed, but ONLY the <em>text</em> (i.e. 1, 2, 3, 4, 5). I.e. the value should be <em>hidden</em> like it is with a general dropdown (<code>&lt;select&gt;</code> element).</p>
  
  <p>This autocomplete feature is necessary, else I would have gone with the normal dropdown.</p>