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就是个坑啊！！