动态创建HTML5数据列表
[英]Creating a HTML5 datalist on the fly
问题描述
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. 但是没有任何反应（没有显示下拉箭头），jQuery也可以接受。
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/ 小提琴： 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/ ) （示例取自本网站： http : //blogs.microsoft.co.il/gilf/2012/07/30/quick-tip-autocomplete-using-html5-datalist-element/ ）
4 个解决方案
解决方案1
1 已采纳 2018-09-19 03:58:01
You have to set the input element's list property as the id of the datalist: 您必须将输入元素的list属性设置为数据list的ID：
<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: 或：如果您不想修改HTML，则可以使用Element.setAttribute()在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"/>
解决方案2
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. 请注意，我是如何直接使用“ input.setAttribute（'list'，'datalist'）”而不是“ input.list ='datalist'”的。
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' />
解决方案3
0 2018-09-19 03:58:23
try below solution using jquery on change of input text its appending options. 在input文本的更改及其附加选项上使用jquery尝试以下解决方案。
$(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>
解决方案4
0 2018-09-19 04:05:28
JS 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 HTML
<input id="my-text-box" list='dlCities'>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.