javascript – 显示datalist标签,但提交实际值

目前HTML5< datalist>大多数主流浏览器(Safari除外)都支持element,这似乎是一种向输入添加建议的有趣方式.

但是,值属性的实现与<选项>上的内部文本之间似乎存在一些差异.例如：

<input list="answers" name="answer">
<datalist id="answers">
  <option value="42">The answer</option>
</datalist>

不同浏览器的处理方式不同：

Chrome和Opera：

FireFox和IE 11：

选择一个后,输入将填充值而不是内部文本.我只希望用户在下拉列表和输入中看到文本(“答案”),但是在提交时传递值42,就像选择那样.

如何使所有浏览器的下拉列表显示< option>的标签(内部文本),但在提交表单时发送value属性？

解决方法:

请注意,datalist与select不同.它允许用户输入不在列表中的自定义值,如果不首先定义,则无法为此类输入获取备用值.

处理用户输入的可能方法是按原样提交输入的值,提交空值或阻止提交.此答案仅处理前两个选项.

如果您想完全禁止用户输入,那么选择将是更好的选择.

要仅显示下拉列表中选项的文本值,我们将使用内部文本并省略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中并获取其数据值.该值将插入隐藏的输入并提交.

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答案和答案 – 知道哪个输入属于哪个隐藏版本.这样,可以在同一页面上具有多个输入,其中一个或多个数据表提供建议.

任何用户输入都按原样提交.要在数据列表中不存在用户输入时提交空值,请将hiddenInput.value = label更改为hiddenInput.value =“”

使用jsFiddle示例：plain javascript和jQuery

标签：html,javascript,html5,cross-browser,html-datalist
来源： https://codeday.me/bug/20190915/1805781.html