动态创建 HTML5 数据列表答案

【问题标题】：Creating a HTML5 datalist on the fly动态创建 HTML5 数据列表
【发布时间】：2019-02-23 03:28:14
【问题描述】：

我正在尝试在飞行中创建一个数据列表并将其附加到现有的输入元素。但什么也没发生（没有显示下拉箭头） 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/)

【问题讨论】：

标签： javascript html

【解决方案1】：

你必须将输入元素的list属性设置为datalist的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();

&lt;input id="my-text-box" list="dlCities"/&gt;

或者：如果不想修改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();

&lt;input id="my-text-box"/&gt;

【讨论】：

我无法修改html代码（现有网站）。因此我需要通过代码添加列表属性。 setAttribute() 对我不起作用：jsfiddle.net/tomsx/704cxako/48
谢谢伙计。现在可以了。看起来 addEventListener() 不起作用。我刚刚删除了它。
当输入标签大于600px时选项与输入宽度不匹配

【解决方案2】：

    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'>

【讨论】：

【解决方案3】：

页面加载时仅存在输入：

注意我是如何直接使用“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");

&lt;input id='my-text-box' /&gt;

【讨论】：

不错的解决方案，甚至更短:)
与setAttribute 配合使用非常好。为什么它不能直接使用 `input.list = 'datalist' ？

【解决方案4】：

尝试使用jquery 更改input 文本其附加选项的以下解决方案。

$(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>

【讨论】：