我遇到了 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>
etc.
在 Firefox 上,我可以输入字母“S”,然后输入“A”(不区分大小写),以上两个条目都会出现。一旦我输入“W”或用鼠标选择 Sawatdee,文本框就会填充 234。这就是我希望发生的事情 - 因为我希望将 234 发送回服务器而不是 Sawatdee。如果我输入“A”然后输入“T”,它也有效。
在 Chrome 上,我可以输入我想要的所有字母,但列表中不会出现任何内容。但是,如果我输入 2,则只会出现第二个条目;但在列表中会显示 2,后跟 Sawatdee。
我是否过度使用/滥用了数据列表,或者 Chrome 是否有问题?或者 Chrome 是否按照技术上应该的方式处理它,而我发现了 Firefox 的错误?
我正在尝试做类似的事情。我认为问题是数据列表没有指定为像下拉选项列表一样工作。一种解决方法是生成一个 和一个数组 ...因此,一旦您在输入中获取了文本值,您就可以使用 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);
}
这应该能让你继续前进。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)