HTML5 datalist值与内部文本 [英] HTML5 datalist value vs. inner-text

问题描述

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

I have an issue that is manifesting between Chrome and Firefox's handling of the HTML5 datalist element.

我可能正在滥用它，Firefox正按照我的预期处理，但Chrome不是。我没有在Opera上试过它。这是针对内部页面的，因此我可以控制正在使用的浏览器。

I may be abusing it, which Firefox is handling the way I expect, but Chrome is not. I have not tried it on Opera. This is for an in-house page, so I can control the browser being used.

我设置了一个值，以及内部文本，如： / p>

I set a value, as well as the inner-text, as in:

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

服务器端值OptionsList是从数据库查询动态构建的。最终结果大致如下：

The server-side value "OptionsList" gets built dynamically from a database query. The end result looks, approximately, like this:

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

等。

在Firefox上，我可以键入字母S，然后键入A（不区分大小写），并且将显示上述两个条目。一旦我键入W或用鼠标选择Sawatdee，文本框就会填充为234.这就是我希望发生的事情 - 因为我希望234发送回服务器而不是Sawatdee。如果我输入A然后输入T，它也有效。

On Firefox, I can type the letters "S" then "A" (case insensitive) and both of the above entries will appear. As soon as I type a "W" or select Sawatdee with the mouse, the text box is populated with 234. This is what I desire to have happen - as I want 234 sent back to the server and not Sawatdee. It also works if I type "A" then "T".

在Chrome上，我可以输入我想要的所有字母，但列表中不会出现任何内容。但是，如果我键入2，则只会出现第二个条目;但是在列表中它会显示一个2然后是Sawatdee。

On Chrome, I can type all the letters I want, but nothing will appear in the list. However, if I type a 2, only the second entry will appear; but in the list it will show a 2 followed by Sawatdee.

我是否过度使用/滥用数据列表或者Chrome有问题吗？或者是Chrome处理它，因为它在技术上应该和我发现了一个Firefox错误？

Am I over-using/abusing the datalist or does Chrome have a problem with it? Or is Chrome handling it as it is technically supposed to and I've found a Firefox bug?

推荐答案

我正在尝试做类似的事情。我认为问题是数据主义者没有像下拉选项列表那样工作。一个解决方法是生成一个<％= OptionsList％>然后生成一个数组<％= OptionListValues％> ...所以一旦你在输入中得到文本值，就可以使用javascript来查找它的关键字在OptionListValues中，将密钥而不是描述发送回服务器。后端的痛苦，并在客户端添加额外的数据负载，虽然我猜你也可以做这个服务器端（在输入中发送文本，然后查找文本，并在服务器端获取密钥）。

I'm trying to do something similar. I think the issue is the datalist isn't spec'ed to work like a dropdown option list. One work around is that you generate both an <%=OptionsList%> and then an array <%=OptionListValues %>...so once you get the text value in your input, you can use javascript to look for it's key in the OptionListValues and send the key instead of the description back to the server. Pain in the rear and adds an extra data load on the client side, though I guess you could do this server side as well (send the text in the input and then lookup the text and get the key on the server side).

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

Too bad Chrome doesn't work like FF on this, maybe in the future the browsers will work like Mozilla on this.

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

Or you can do something like this. Say you have the following input/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值...这里是我的例如，我确信这可以进行一些优化。

You can use jQuery (or plain javascript) to dig out the id value...here is my example, I'm sure this could be optimized a bit.

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

这应该可以帮助你。

这篇关于HTML5 datalist值与内部文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！