HTML5 datalist值与内部文本

Question

我在Chrome和Firefox对HTML5DataList元素的处理上遇到了一个问题。

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

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

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

Answer 1

我也在试着做类似的事情。我认为问题是datalist并不像下拉选项列表那样工作。一个方法是生成<%=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>

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

那应该能让你走。