HTML5 DataList控件的值与内文(HTML5 datalist value vs. inn

我有一个Chrome和Firefox的处理HTML5的datalist元素之间表现的问题。

我可能会滥用它，这Firefox是处理我所期望的方式，而Chrome则不是。我还没有尝试过的歌剧。这是一个内部的网页，所以我可以控制所使用的浏览器。

我设置的值，以及内文，如：

<input list="Names" placeholder="Enter Name or ID" name="txtSearchValue" autocomplete="off"/>
<datalist id="Names"><%=OptionsList%></datalist>

在服务器侧价值“OptionsList”会从一个数据库查询动态生成。最终的结果看，大约，如下所示：

<option value="123">Sam's Fresh Sandwiches</option>
<option value="234">Sawatdee</option>

等等

在Firefox，我可以键入字母“S”，则“A”（不区分大小写）和两个以上的条目将出现。当我键入一个“W”或用鼠标选择Sawatdee，文本框中，填入234这是我渴望有发生 - 因为我想234发送回服务器，而不是Sawatdee。如果我输入“A”，然后“T”它也可以。

在Chrome，我可以输入所有我想要的字母，但没有出现在列表中。但是，如果我键入2，只有第二项将出现; 但列表中会显示一个2后跟Sawatdee。

我是不是过度使用/滥用DataList控件或Chrome是否有问题呢？抑或是镀铬处理，因为它在技术上应该和我找到了一个Firefox的错误？

Answer 1:

我试图做同样的事情。我认为这个问题是在DataList不spec'ed像一个下拉选项列表的工作。一个解决的是，你同时生成一个<％= OptionsList％>然后一个数组<％= OptionListValues％> ...所以，一旦你在你输入的文本值，你可以使用JavaScript来寻找它的重点OptionListValues和发送的关键，而不是描述回服务器。疼痛的后方，并增加了在客户端的额外数据负荷，但我想你可以做到这一点的服务器端，以及（在输入发送文本，然后查找文本，并获得服务器端的密钥）。

太糟糕了Chrome不喜欢FF工作这一点，也许在未来的浏览器会像Mozilla的这一点。

或者你也可以做这样的事情。假设你有下面的输入/ DataList控件

<input id="datalisttestinput" list="stuff" ></input>
        <datalist id="stuff">
            <option id="3" value="Collin" >
            <option id="5" value="Carl">
            <option id="1" value="Amy" >
            <option id="2" value="Kristal">
        </datalist>

您可以使用jQuery（或普通的JavaScript），以挖掘出的id值...这里是我的榜样，我敢肯定，这可以优化一下。

 function GetValue() {
            var x = $('#datalisttestinput').val();
            var z = $('#stuff');
            var val = $(z).find('option[value="' + x + '"]');
            var endval = val.attr('id');
            alert(endval);
        }

这应该让你去。

Answer 2:

稍微修改infocyde的答案使用隐藏字段包含最终被发送到服务器的值。

$('#inputStates').change(function(){
    var c =  $('#inputStates').val();
    $('#inputStates').val(getTextValue());
    $('#statesHidden').val(c);
});

function getTextValue(){
  var val =  $('#inputStates').val();
  var states = $('#states');
  var endVal = $(states).find('option[value="' + val + '"]'); 
  //depending on your logic, if endVal is empty it means the value wasn't found in the datalist, you can take some action here
  return endVal.text();  
}

文章来源: HTML5 datalist value vs. inner-text