【网页-HTML/JS】html5 中新的datalist 自动下拉提示输入框

https://blog.csdn.net/paincupid/article/details/50522709

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

内容时，自动下拉提示建议用户的输入，这叫autocomplete或者autosuggestion功能，
这样能加快用户的输入，目前的做法是通过ajax去实现，比如通过DWR等，这方面
的资料很多的。
而HTML5中，新增加了datalist这个标签，其实也是可以满足在前端达到
同样的功能，例子如下：
  

[html]  view plain  copy

1. <input type="text" value="" list="fruits" />    
2.     <datalist id="fruits">    
3.       <option value="Apple"></option>     
4.       <option value="Orange"></option>     
5.       <option value="Peach"></option>     
6.     </datalist>    

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

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

[html]  view plain  copy

1. <datalist id="fruits">    
2.   Pick your favorite fruit    
3.   <select name="fruit_sel">    
4.   <option value="Apple">Apple</option>     
5.   <option value="Orange">Orange</option>     
6.   <option value="Peach">Peach</option>     
7.   </select>    
8.   or type one.    
9. </datalist>    
10. <input type="text" name="fruit" value="" list="fruits" />    

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

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

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

[html]  view plain  copy

1. <input list="items" id="item">  
2.   
3. <datalist id="items">  
4.   <option value="A item"  data-xyz = "1" >  
5.   <option value="aa item" data-xyz = "2" >  
6.   <option value="C item"  data-xyz = "3" >  
7.   <option value="D item"  data-xyz = "4" >  
8.   <option value="E item"  data-xyz = "5" >  
9. </datalist>   
10.   
11. <input type="button" id="button" value="Get xyz" />  

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

[html]  view plain  copy

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

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

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

[html]  view plain  copy

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

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