标签：
学习的过程中总会遇到很多同类的问题，把这写常用的东西写出来供参考不错，今天开始做这件事。今天是实现的搜索下拉框，代码如下：
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>
标签：
原文地址：http://www.cnblogs.com/jxb520wan/p/4855879.html
