title: HTML5 datalist value vs. inner-text
body: <p>I have an issue that is manifesting between Chrome and Firefox's handling of the HTML5 datalist element.</p>
  
  <p>I may be abusing it, which Firefox is handling the way I expect, but Chrome is not. I have not tried it on Opera. This is for an in-house page, so I can control the browser being used.</p>
  
  <p>I set a value, as well as the inner-text, as in:</p>
  
  <pre><code>&lt;input list="Names" placeholder="Enter Name or ID" name="txtSearchValue" autocomplete="off"/&gt;
  &lt;datalist id="Names"&gt;&lt;%=OptionsList%&gt;&lt;/datalist&gt;
  </code></pre>
  
  <p>The server-side value "OptionsList" gets built dynamically from a database query. The end result looks, approximately, like this:</p>
  
  <pre><code>&lt;option value="123"&gt;Sam's Fresh Sandwiches&lt;/option&gt;
  &lt;option value="234"&gt;Sawatdee&lt;/option&gt;
  </code></pre>
  
  <p>etc.</p>
  
  <p>On Firefox, I can type the letters "S" then "A" (case insensitive) and both of the above entries will appear. As soon as I type a "W" or select Sawatdee with the mouse, the text box is populated with 234. This is what I desire to have happen - as I want 234 sent back to the server and not Sawatdee. It also works if I type "A" then "T".</p>
  
  <p>On Chrome, I can type all the letters I want, but nothing will appear in the list. However, if I type a 2, only the second entry will appear; but in the list it will show a 2 followed by Sawatdee.</p>
  
  <p>Am I over-using/abusing the datalist or does Chrome have a problem with it? Or is Chrome handling it as it is technically supposed to and I've found a Firefox bug?</p>