html-datalist

multiple selections with datalist

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=”first@example.com”> <option value=”second@example.com”> <option value=”third@example.com”> <option value=”last@example.com”> </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”> … Read more

Use HTML5 (datalist) autocomplete with ‘contains’ approach, not just ‘starts with’

‘contains’ approach Maybe this is what you are looking for (part 1 of your question). It goes with the limitation of “starts with” and changes when a selection is made. ‘use strict’; function updateList(that) { if (!that) { return; } var lastValue = that.lastValue, value = that.value, array = [], pos = value.indexOf(‘|’), start = … Read more

Perform action when clicking HTML5 datalist option

Sorry for digging up this question, but I’ve had a similar problem and have a solution, that should work for you, too. function onInput() { var val = document.getElementById(“input”).value; var opts = document.getElementById(‘dlist’).childNodes; for (var i = 0; i < opts.length; i++) { if (opts[i].value === val) { // An item was selected from the … Read more