使用Jquery ui实现自动补全功能

最新推荐文章于 2025-03-15 09:10:17 发布

chijiang1747

最新推荐文章于 2025-03-15 09:10:17 发布

阅读量271

点赞数

文章标签： ui 数据库 python

原文链接：https://my.oschina.net/chengwei426/blog/737996

版权

自动补全功能可以给用户很好的体验, 之前没太注意, 现在发现Jquery ui可以非常简单的实现自动补全功能:<link type="text/css" rel="stylesheet" href="jquery-ui.css"> <script src="jquery-1.11.1.min.js"></script> <script src="jquery-ui.js"></script> <script> $(document).ready(function(){ var autoTags = ["iwen","ime","html","css","java","javascript","python"]; $("#tags").autocomplete({ source:autoTags }); }); </script> </head> <body> <label>Tags:</label> <input id="tags" type="text"/> </body> </html>

 将autoTags改成你后台数据库中数据,就实现了很好的自动补全功能

 -------------------------------------------------------------------------------------------------

Jquery ui的时间控件:

<link type="text/css" rel="stylesheet" href="jquery-ui.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery-ui.js"></script> 
<script> 
    $(document).ready(function(){ 
        $("#btn").button().on("click",function(){ 
            $("#datepicker").datepicker(); 
        });
     }); 
</script> 
</head> 
<body> 
    <p>Date:<input type="date" id="html5"></p> 
    <p>Date:<input type="text" id="datepicker"></p>
     <a href="#" id="btn">按钮</a> 
</body> 
</html>