multiple selections with datalist

by

Multiple currently working only with input type=”email” and only in Chrome and Opera

Look at this minimalist example:

input{width:500px}
<input type="email" list="emails" multiple>
<datalist id="emails">
    <option value="[email protected]">
    <option value="[email protected]">
    <option value="[email protected]">
    <option value="[email protected]">
</datalist>

<br><br><br>

<input type="text" list="texts" multiple>
<datalist id="texts">
    <option value="black">
    <option value="gold">
    <option value="grey">
    <option value="pink">
    <option value="turquoise">
    <option value="red">
    <option value="white">
</datalist>

First input will be working, second NOT.

You only press comma, and list will appear as same as on click into input.

There’s also a polyfill, look at the working example in fiddle : https://jsfiddle.net/iiic/gprLnuwy/4/

Leave a Comment