Databases
StackOverflow2013
Postsdbo
POHTML5 datalist value vs. inner-text
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML5 datalist value vs. inner-text
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload