首页 > 代码库 > 下拉列表autocomplete各种实现方式比较
下拉列表autocomplete各种实现方式比较
方法一：用form 表单的datalist属性，此时会以首字母补充排序。实现效果参考：http://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_datalist
<!DOCTYPE html><html><body><form action="action_page.php"><input list="browsers" name="browser"><datalist id="browsers"><option value="Internet Explorer"><option value="Internet2 Explorer"><option value="Firefox"><option value="Chrome"><option value="Opera"><option value="Safari"></datalist><input type="submit"></form><p><b>Note:</b> The datalist tag is not supported in Safari or IE9 (and earlier).</p></body></html>
方法二：用easycomplete，下载地址http://easyautocomplete.com/。实现效果会匹配包含输入字母的所有选项
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!-- Using jQuery with a CDN --> <script src="./jquery-2.1.3.min.js"></script> <!-- JS file --> <script src="./jquery.easy-autocomplete.min.js"></script> <!-- CSS file --> <link rel="stylesheet" href="./easy-autocomplete.min.css"> <!-- Additional CSS Themes file - not required--> <!--<link rel="stylesheet" href="http://www.mamicode.com/easy-autocomplete.themes.min.css">--> <script> $(document).ready(function () { var options = { data: ["blue", "green", "pink", "red", "yellow"] }; $("#basics").easyAutocomplete(options); }) </script></head><body><input id="basics"/></body></html>
下拉列表autocomplete各种实现方式比较
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。