请注意,datalist与并不相同select。它允许用户输入不在列表中的自定义值,并且如果不先定义它就无法获取此类输入的替代值。
处理用户输入的可能方法是按原样提交输入的值,提交空白值或阻止提交。该答案仅处理前两个选项。
如果您想完全禁止用户输入,也许select是一个更好的选择。
要仅option在下拉列表中显示的文本值,我们对其使用内部文本,而忽略该value属性。我们要发送的实际值存储在自定义data-value属性中:
要提交此信息,data-value
我们必须使用<input type="hidden">
。在这种情况下,我们忽略name="answer"
常规输入上的,然后将其移至 隐藏副本。
<input list="suggestionList" id="answerInput">
<datalist id="suggestionList">
<option data-value="42">The answer</option>
</datalist>
<input type="hidden" name="answer" id="answerInput-hidden">
这样,当原始输入中的文本更改时,我们可以使用javascript检查文本是否也存在于中datalist并获取其data-value。 该值将插入到隐藏的输入中并提交。
document.querySelector('input[list]').addEventListener('input', function(e) {
var input = e.target,
list = input.getAttribute('list'),
options = document.querySelectorAll('#' + list + ' option'),
hiddenInput = document.getElementById(input.getAttribute('id') + '-hidden'),
inputValue = input.value;
hiddenInput.value = inputValue;
for(var i = 0; i < options.length; i++) {
var option = options[i];
if(option.innerText === inputValue) {
hiddenInput.value = option.getAttribute('data-value');
break;
}
}
});
脚本需要id answer以及answer-hidden常规和隐藏输入,才能知道哪个输入属于哪个隐藏版本。这样,在同一页面上可以有多个input,其中一个或多个datalist可以提供建议。
任何用户输入均按原样提交。要在数据列表中不存在用户输入时提交空值,请更改hiddenInput.value = label
为hiddenInput.value = ""