HTML5 datalist值与内部文本

时间:2013-01-26 00:20:28

标签: html5 html-datalist

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

2 个答案:

答案 0 :(得分:6)

我试图做类似的事情。我认为问题是数据列表没有像下拉选项列表那样工作。一个解决方法是生成&lt;%= OptionsList%&gt;然后是一个数组&lt;%= OptionListValues%&gt; ...所以一旦你在输入中得到文本值,就可以使用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);
        }

这应该让你去。

答案 1 :(得分: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();  
}