显示数据列标签，但提交实际值 [英] Show datalist labels but submit the actual value

问题描述

目前，大多数主流浏览器（Safari除外）都支持HTML5 < datalist> 元素，并且似乎是一种向输入添加建议的有趣方式。

但是， value 属性的实现与<$ c $的内部文本之间似乎存在一些差异c>< option> 。例如：

 < input list =answersname =answer 
< datalist id =answers> 
< option value =42>答案< / option> 
< / datalist> 
  

这是由不同的浏览器处理不同：

Chrome和Opera：

FireFox和IE 11：

选择一个后，输入将填充值而不是内部文本。我只希望用户在下拉菜单和输入中看到文本（答案），但在提交时传递值 42 ，例如<$ c $如何使所有浏览器都具有下拉列表显示<$ c $>的标签（内部文本）。

< c>< option> s，但是在提交表单时发送 value

解决方案

请注意， datalist 不同于 select 。它允许用户输入不在列表中的自定义值，并且不可能在未定义此类输入的情况下获取替代值。

处理用户输入的可能方法是按原样提交输入的值，提交空白值或阻止提交。

如果您要完全禁止用户输入，也许选择更好的选择。

---

只显示选项的文本值在下拉列表中，我们使用内部文本，并省略 value 属性。我们要发送的实际值存储在自定义的数据值属性中：

data-value 我们必须使用< input type =hidden> 。在这种情况下，我们在常规输入中省略 name =answer，并将其移动到隐藏副本。

 < input list =suggestionListid =answerInput> 
< datalist id =suggestionList> 
< option  > data-value =42 >回答< / option> 
< / datalist> 
< input type =hiddenname =answerid =answerInput-hidden>  

这样，当原始输入中的文本更改时，该文本也出现在 datalist 中，并获取其数据值。该值被插入到隐藏的输入并提交。

  document.querySelector（'input [list]'）。addEventListener输入'，函数（e）{
 var input = e.target，
 list = input.getAttribute（'list'），
 options = document.querySelectorAll '选项'），
 hiddenInput = document.getElementById（input.id +'-hidden'），
 inputValue = input.value; 
 
 hiddenInput.value = inputValue; 
 
 for（var i = 0; i  var option = options [i]; 
 
 if（option.innerText = == inputValue）{
 hiddenInput.value = option.getAttribute（'data-value'）; 
 break; 
} 
} 
} 
  

---

ID answer 和 answer-hidden 对于脚本需要知道哪个输入属于哪个隐藏版本。这样，在同一页面上可以有多个输入，一个或多个 datalist 提供建议。

任何用户输入都是按原样提交的。要在数据列表中不存在用户输入时提交空值，请将 hiddenInput.value = label 更改为 hiddenInput.value = code>

---

工作jsFiddle示例：纯文本javascript 和 jQuery

Currently the HTML5 <datalist> element is supported in most major browsers (except Safari) and seems like an interesting way to add suggestions to an input.

However, there seem to be some discrepancies between the implementation of the value attribute and the inner text on the <option>. For example:

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

This is handled differently by different browsers:

Chrome and Opera:

FireFox and IE 11:

After selecting one, the input is filled with the value and not the inner text. I only want the user to see the text ("The answer") in the dropdown and in the input, but pass the value 42 on submit, like a select would.

How can I make all browsers have the dropdown list show the labels (inner text) of the <option>s, but send the value attribute when the form is submitted?

解决方案

Note that datalist is not the same as a select. It allows users to enter a custom value that is not in the list, and it would be impossible to fetch an alternate value for such input without defining it first.

Possible ways to handle user input are to submit the entered value as is, submit a blank value, or prevent submitting. This answer handles only the first two options.

If you want to disallow user input entirely, maybe select would be a better choice.

---

To show only the text value of the option in the dropdown, we use the inner text for it and leave out the value attribute. The actual value that we want to send along is stored in a custom data-value attribute:

To submit this data-value we have to use an <input type="hidden">. In this case we leave out the name="answer" on the regular input and move it to the hidden copy.

<input list="suggestionList" id="answerInput">
<datalist id="suggestionList">
    <option data-value="42">The answer</option>
</datalist>
<input type="hidden" name="answer" id="answerInput-hidden">

This way, when the text in the original input changes we can use javascript to check if the text also present in the datalist and fetch its data-value. That value is inserted into the hidden input and submitted.

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.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;
        }
    }
});

---

The id answer and answer-hidden on the regular and hidden input are needed for the script to know which input belongs to which hidden version. This way it's possible to have multiple inputs on the same page with one or more datalists providing suggestions.

Any user input is submitted as is. To submit an empty value when the user input is not present in the datalist, change hiddenInput.value = label to hiddenInput.value = ""

---

Working jsFiddle examples: plain javascript and jQuery

这篇关于显示数据列标签，但提交实际值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！