您的位置：首页 > Web前端 > JQuery

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

2020-07-14 05:43 330 查看

自动补全功能可以给用户很好的体验, 之前没太注意, 现在发现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>

转载于:https://my.oschina.net/chengwei426/blog/737996

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航