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

川长思鸟来 2022-08-19 13:12 249阅读 0赞

在日常的页面制作中，为了方便用户输入，经常可以在一个输入文本框中，当用户输入  
内容时，自动下拉提示建议用户的输入，这叫autocomplete或者autosuggestion功能，  
这样能加快用户的输入，目前的做法是通过ajax去实现，比如通过DWR等，这方面  
的资料很多的。  
而HTML5中，新增加了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][http_caniuse.com_feat_datalist]

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

当点击某个按钮或提交的时候，得到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][http_stackoverflow.com_questions_13322802_jquery-how-to-get-value-of-a-particular-data-attribute-from-selected-datalist]

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

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

[http_caniuse.com_feat_datalist]: http://caniuse.com/#feat=datalist
[http_stackoverflow.com_questions_13322802_jquery-how-to-get-value-of-a-particular-data-attribute-from-selected-datalist]: http://stackoverflow.com/questions/13322802/jquery-how-to-get-value-of-a-particular-data-attribute-from-selected-datalist