9

我在 Chrome 和 Firefox 对 HTML5 datalist 元素的处理之间出现了一个问题。

我可能正在滥用它，Firefox 正在以我期望的方式处理它，但 Chrome 不是。我还没有在 Opera 上尝试过。这是一个内部页面，所以我可以控制正在使用的浏览器。

我设置了一个值以及内部文本，如下所示：

<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。

我是过度使用/滥用数据列表还是 Chrome 有问题？或者 Chrome 是否按照技术上应该的方式处理它并且我发现了一个 Firefox 错误？

4

2 回答 2

6

我正在尝试做类似的事情。我认为问题在于数据列表没有像下拉选项列表那样工作。一种解决方法是您生成一个 <%=OptionsList%> 和一个数组 <%=OptionListValues %>...所以一旦您在输入中获得文本值，您就可以使用 javascript 在OptionListValues 并将密钥而不是描述发送回服务器。后面的痛苦并在客户端增加了额外的数据负载，尽管我猜你也可以在服务器端执行此操作（在输入中发送文本，然后在服务器端查找文本并获取密钥）。

太糟糕了 Chrome 在这方面不像 FF 那样工作，也许将来浏览器会像 Mozilla 这样工作。

或者你可以做这样的事情。假设您有以下输入/数据列表

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

那应该让你继续前进。

于 2013-03-20T18:38:45.787 回答
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();  
}
于 2014-10-13T05:56:10.893 回答