[英]Creating a HTML5 datalist on the fly
我试图在它们飞行时创建一个数据列表,并将其附加到现有的输入元素上。 但是没有任何反应(没有显示下拉箭头),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);
}
小提琴: https : //jsfiddle.net/tomsx/704cxako/
(示例取自本网站: http : //blogs.microsoft.co.il/gilf/2012/07/30/quick-tip-autocomplete-using-html5-datalist-element/ )
您必须将输入元素的list
属性设置为数据list
的ID:
<input id="my-text-box" 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'); 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"/>
或:如果您不想修改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"/>
加载页面时仅存在输入:
请注意,我是如何直接使用“ 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' />
在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>
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'>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.