【网页-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就是个坑啊!!


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值