搜索下拉框

学习的过程中总会遇到很多同类的问题，把这写常用的东西写出来供参考不错，今天开始做这件事。今天是实现的搜索下拉框，代码如下：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>搜索下拉框</title>
 6 <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
 7 <script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.min.js" type="text/javascript" ></script>
 8 <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
 9 <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
10 <style>
11     body{background: rgba(0, 0, 0,.5)}
12     .form{margin-top: 150px;}
13     .form-control{
14         border-bottom-left-radius: 0;
15         border-bottom-right-radius: 0;
16     }
17     .wrap-music{
18         display: none;
19         padding: 0;
20         border: 1px solid saddlebrown;
21     }
22     .wrap-music li{
23         list-style-type: none;
24         padding-top: 10px;
25         padding-bottom: 10px;
26         padding-left: 10px;
27         transition: .3s;
28     }
29     .wrap-music li:hover{
30         padding-left: 20px;
31         background: blueviolet;
32     }
33 </style>
34 <script>
35     $(function(){
36         $('#music').focus(function(){
37             $('.wrap-music').slideDown();
38         });
39     });
40     var app = angular.module('myMusic',[])
41     app.controller('musicCtrl',function($scope){
42         
43 });
44     function passvalue(obj){
45         var returnvalue = $(obj).text();
46         $('#music').val(returnvalue);
47         $('.wrap-music').slideUp('fast');
48     }
49 </script>
50 </head>
51 <body  ng-app="myMusic" ng-controller="musicCtrl" ng-init="music=['北极星的眼泪','最美的太阳','演员','模特','量身定做','天下','喜欢你']">
52     <div class="row">
53         <div class="col-md-12">
54             <form class="form-horizontal form">
55                 <div class="form-group">
56                     <label for="music" class="col-md-4 control-label">选择歌曲: </label>
57                     <div class="col-md-4">
58                         <input type="text" class="form-control" id="music" ng-model="bymusic">
59                         <ul class="wrap-music">
60                             <li onClick="passvalue(this)" ng-repeat="x in music | filter:bymusic">{{x}}</li>
61                         </ul>
62                     </div>
63                 </div>
64             </form>
65         </div>
66     </div>
67 </body>
68 </html>

posted @ 2015-10-05 16:19 Flyings 阅读(476) 评论(0) 收藏举报

刷新页面返回顶部