Question

目前大多数主流浏览器（Safari除外）都支持HTML5 Server: cloudflare-nginx Date: Sun, 26 Apr 2015 19:16:10 GMT Content-Type: text/plain; charset=UTF-8 Transfer-Encoding: chunked Connection: keep-alive Set-Cookie: __cfduid=d1417361f04bd2b49d8441d7277183e461430075769; expires=Mon, 25-Apr-16 19:16:09 GMT; path=/; domain=.meetup.com; HttpOnly Content-Language: en-US Set-Cookie: MEETUP_MEMBER="id=0&status=1&timestamp=1430075770&bs=0&tz=US%2FEastern&zip=&country=us&city=&state=&lat=0.0&lon=0.0&s=ddb06082e776a3584371372d7ada246a71c2b652"; Version=1; Domain=.meetup.com; Path=/ Set-Cookie: MEETUP_AFFIL="affil=meetup"; Version=1; Domain=.meetup.com; Max-Age=3888000; Expires=Wed, 10-Jun-2015 19:16:10 GMT; Path=/ Set-Cookie: MEETUP_LANGUAGE="language=en&country=US"; Version=1; Domain=.meetup.com; Path=/ Set-Cookie: MEETUP_TRACK="id=532f9f2c-71ec-49a9-97e0-e92bac9c47c5&l=0&s=e467a30a7fce8c0b4b6b3fb21e80b934a3ffe6a3"; Version=1; Domain=.meetup.com; Max-Age=630720000; Expires=Sat, 21-Apr-2035 19:16:10 GMT; Path=/ Set-Cookie: MEETUP_CSRF=7897444a-e0d2-49ff-bcb3-8766976a0e0f; Domain=.meetup.com; Expires=Tue, 26-May-2015 19:16:10 GMT; Path=/ Vary: Accept-Encoding,User-Agent CF-RAY: 1dd49ed9eac205e1-WAW元素，这似乎是一种向输入添加建议的有趣方式。

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

<option>

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

Chrome和Opera：
Datalist in Chrome/Opera

FireFox和IE 11：
Datalist in FireFox

选择一个后，输入将填充值而不是内部文本。我只希望用户在下拉列表和输入中看到文本（“答案”），但在提交时传递值<input list="answers" name="answer"> <datalist id="answers"> <option value="42">The answer</option> </datalist>，就像42一样。

如何让所有浏览器的下拉列表显示select的标签（内部文本），但在提交表单时发送<option>属性？

Answer 1

请注意，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 = ""

使用jsFiddle示例：plain javascript和jQuery

Answer 2

我使用的解决方案如下：

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

然后使用以下JavaScript访问要发送到服务器的值：

var shownVal = document.getElementById("answer").value;
var value2send = document.querySelector("#answers option[value='"+shownVal+"']").dataset.value;

希望它有所帮助。

Answer 3

我意识到这可能有点晚了，但是我偶然发现了这一点，并且想知道如何处理具有多个相同值但键不同的情况（根据bigbearzhu的评论）。

所以我稍微修改了斯蒂芬·穆勒的答案：

具有非唯一值的数据列表：

<input list="answers" name="answer" id="answerInput">
<datalist id="answers">
  <option value="42">The answer</option>
  <option value="43">The answer</option>
  <option value="44">Another Answer</option>
</datalist>
<input type="hidden" name="answer" id="answerInput-hidden">

当用户选择一个选项时，浏览器将input.value的{{1}}替换为value的{{1}}。

然后，下面的代码检查带有datalist的{{1}}，将其推入隐藏字段，并将innerText替换为option。

value

因此，用户可以看到选项input.value所说的内容，但是innerText中的唯一ID在提交表单时可用。 Demo jsFiddle

Answer 4

单击搜索按钮时，您可以找到它而没有循环。
只需在选项中添加具有所需值的属性（例如id）并搜索特定的属性即可。

$('#search_wrapper button').on('click', function(){
console.log($('option[value="'+ 
$('#autocomplete_input').val() +'"]').data('value'));
})

Answer 5

要获得 text() 而不是 val() 尝试：

$("#datalistid option[value='" + $('#inputid').val() + "']").text();

Answer 6

使用PHP，我发现了一种非常简单的方法来做到这一点。伙计们，只要使用这样的东西

<input list="customers" name="customer_id" required class="form-control" placeholder="Customer Name">
            <datalist id="customers">
                <?php 
    $querySnamex = "SELECT * FROM `customer` WHERE fname!='' AND lname!='' order by customer_id ASC";
    $resultSnamex = mysqli_query($con,$querySnamex) or die(mysql_error());

                while ($row_this = mysqli_fetch_array($resultSnamex)) {
                    echo '<option data-value="'.$row_this['customer_id'].'">'.$row_this['fname'].' '.$row_this['lname'].'</option>
                    <input type="hidden" name="customer_id_real" value="'.$row_this['customer_id'].'" id="answerInput-hidden">';
                }

                 ?>
            </datalist>

上面的代码使表单可以携带也被选中的选项的ID。

显示datalist标签，但提交实际值

6 个答案: