html-datalist

Setting hidden datalist option values

You can use data-value and jquery to make your value hidden. e.g: $(document).ready(function() { $(‘#submit’).click(function() { var value = $(‘#selected’).val(); alert($(‘#browsers [value=”‘ + value + ‘”]’).data(‘value’)); }); }); <script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script> <input id=”selected” list=”browsers” name=”browser”> <datalist id=”browsers”> <option data-value=”1″ value=”InternetExplorer”></option> <option data-value=”2″ value=”Firefox”></option> <option data-value=”3″ value=”Chrome”></option> </datalist> <input id=”submit” type=”submit”> jsfiddle Thanks to @guest271314

Find selected item in Datalist in HTML

You can add an ID to the input field – and listen for the input event. Then you have to get the value of the input to use in the selector to get the selected option $(function() { $(‘#browserinput’).on(‘input’,function() { var opt = $(‘option[value=”‘+$(this).val()+'”]’); alert(opt.length ? opt.attr(‘id’) : ‘NO OPTION’); }); }); <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script> <input … Read more

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=”[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”> … 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