HTML5 datalist值与内部文本

Question

我有一个问题,表现在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错误？

Answer 1

我正在尝试做类似的事情.我认为问题是数据主义者没有像下拉选项列表那样工作.一个解决方法是生成<%= 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);
        }

这应该让你去.