html5 中新的datalist 自动下拉提示输入框

在日常的页面制作中，为了方便用户输入，经常可以在一个输入文本框中，当用户输入

内容时，自动下拉提示建议用户的输入，这叫autocomplete或者autosuggestion功能，

这样能加快用户的输入，目前的做法是通过ajax去实现，比如通过DWR等，这方面

的资料很多的。

而HTML5中，新增加了datalist这个标签，其实也是可以满足在前端达到

同样的功能，例子如下：

<input type="text" value="" list="fruits" />
<datalist id="fruits">
<option value="Apple"></option>
<option value="Orange"></option>
<option value="Peach"></option>
</datalist>

这样的代码运行后，当用户在文本输入框输入内容时，就会下拉提示三种水果，

建议用户输入，如果担心浏览器兼容问题，可以尝试用如下代码：

<datalist id="fruits">
Pick your favorite fruit
<select name="fruit_sel">
<option value="Apple">Apple</option>
<option value="Orange">Orange</option>
<option value="Peach">Peach</option>
</select>
or type one.
</datalist>
<input type="text" name="fruit" value="" list="fruits" />

但这个情况下，记得服务端要同时捕捉fruits和fruit_sel两个参数了datalist在firefox版本下一直都有的，这个赞扬一个，而其他版本浏览器

对其兼容情况，可以参考这个地址： http://caniuse.com/#feat=datalist

得到值，困为在不同的浏览器上，会有不同的表现，尤其是datalist。所以，我会这样写：

<input list="items" id="item">

<datalist id="items">
<option value="A item"  data-xyz = "1" >
<option value="aa item" data-xyz = "2" >
<option value="C item"  data-xyz = "3" >
<option value="D item"  data-xyz = "4" >
<option value="E item"  data-xyz = "5" >
</datalist>

<input type="button" id="button" value="Get xyz" />

当点击某个按钮或提交的时候，得到data-xyz的值

$("#button").click(function() {
var val = $('#item').val()
var xyz = $('#items option').filter(function() {
return this.value == val;
}).data('xyz');
/* if value doesn't match an option, xyz will be undefined*/
var msg = xyz ? 'xyz=' + xyz : 'No Match';
alert(msg)

})

以上内容参考：http://stackoverflow.com/questions/13322802/jquery-how-to-get-value-of-a-particular-data-attribute-from-selected-datalist

但它不支持不同的ID，相同的Name的情况，比如如下情况：

<input type="text" value="" list="department" />
<datalist id="department">
<option data-id="1" value="arthur"></option>
<option data-id="2" value="arthur"></option>
<option data-id="3" value="king"></option>

</datalist>

而且，chrome不支持中文搜索，firefox倒是支持。唉... datalist就是个坑啊！！