学习的过程中总会遇到很多同类的问题，把这写常用的东西写出来供参考不错，今天开始做这件事。今天是实现的搜索下拉框，代码如下：
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>
时间： 2024-10-17 03:57:36