Creating a HTML5 datalist on the fly
Question
I'm trying to create a datalist on they fly and attach it to an existing input element. But nothing happens (no dropdown arrow is shown) jQuery would be acceptable, too.
var optionList = ["Seattle", "Las Vegas", "New York", "Salt lake City"];
function fillDataList() {
var container = document.getElementById('my-text-box'),
i = 0,
len = optionList.length,
dl = document.createElement('datalist');
dl.id = 'dlCities';
for (; i < len; i += 1) {
var option = document.createElement('option');
option.value = optionList[i];
dl.appendChild(option);
}
container.appendChild(dl);
}
Fiddle: https://jsfiddle.net/tomsx/704cxako/
(Example taken from this site: http://blogs.microsoft.co.il/gilf/2012/07/30/quick-tip-autocomplete-using-html5-datalist-element/ )
4 answers
solution1
1 ACCPTED 2018-09-19 03:58:01
You have to set the input element's list property as the id of the datalist:
<input id="my-text-box" list="dlCities"/>
Working Code Example:
var optionList = ["Seattle", "Las Vegas", "New York", "Salt lake City"]; function fillDataList() { var container = document.getElementById('my-text-box'), i = 0, len = optionList.length, dl = document.createElement('datalist'); dl.id = 'dlCities'; for (; i < len; i += 1) { var option = document.createElement('option'); option.value = optionList[i]; dl.appendChild(option); } container.appendChild(dl); } fillDataList();
<input id="my-text-box" list="dlCities"/>
OR: If you do not want to modify the HTML, you can use Element.setAttribute() to set the attribute in JavaScript:
container.setAttribute('list','dlCities');
var optionList = ["Seattle", "Las Vegas", "New York", "Salt lake City"]; function fillDataList() { var container = document.getElementById('my-text-box'), i = 0, len = optionList.length, dl = document.createElement('datalist'); container.setAttribute('list','dlCities'); // Set the attribute here dl.id = 'dlCities'; for (; i < len; i += 1) { var option = document.createElement('option'); option.value = optionList[i]; dl.appendChild(option); } container.appendChild(dl); } fillDataList();
<input id="my-text-box"/>
solution2
1 2018-09-19 04:05:19
With only the input present when the page is loaded :
notice how I use "input.setAttribute('list','datalist')" and not "input.list = 'datalist' " directly.
var datalist = document.createElement('datalist'); datalist.id = "datalist"; document.body.appendChild(datalist); ["Seattle", "Las Vegas", "New York", "Salt lake City"].forEach(function(data) { var option = document.createElement('option') option.value = data datalist.appendChild(option) }); document.querySelector('#my-text-box').setAttribute('list', "datalist");
<input id='my-text-box' />
solution3
0 2018-09-19 03:58:23
try below solution using jquery on change of input text its appending options.
$(document).ready(function() { $("#search").on("input", function(e) { var val = $(this).val(); if(val === "") return; var arr = ['apple','banana','google','code','microsoft']; var dataList = $("#searchresults"); dataList.empty(); if(arr.length) { for(var i=0, len=arr.length; i<len; i++) { var opt = $("<option></option>").attr("value", arr[i]); dataList.append(opt); } } }); });
<!doctype html> <html> <head> <title>Example 1</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <p> <input type="text" name="search" id="search" placeholder="Type Something" list="searchresults" autocomplete="off" /> <datalist id="searchresults"></datalist> </p> </body> </html>
solution4
0 2018-09-19 04:05:28
JS
var optionList = ["Seattle", "Las Vegas", "New York", "Salt lake City"];
function fillDataList() {
var container = document.getElementById('my-text-box'),
i = 0,
len = optionList.length,
dl = document.createElement('datalist');
dl.id = 'dlCities';
for (; i < len; i += 1) {
var option = document.createElement('option');
option.value = optionList[i];
dl.appendChild(option);
}
container.appendChild(dl);
}
fillDataList();
HTML
<input id="my-text-box" list='dlCities'>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.