1<!doctype html>234<meta charset= "Utf-8" >5<title> Search drop-down box </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"/>Ten<style> OneBody{background:rgba (0, 0, 0,.5)} A. form{margin-top:150px;} -. form-control{ -border-bottom-left-radius:0; theborder-bottom-right-radius:0; - } -. wrap-music{ - Display:none; +padding:0; - border:1px solid saddlebrown; + } A. wrap-Music li{ atlist-style-Type:none; -padding-top:10px; -padding-bottom:10px; -padding-left:10px; - transition:. 3s; - } in. wrap-Music li:hover{ -padding-left:20px; to Background:blueviolet; + } -</style> the<script> *$(function(){ $$ (' #music '). Focus (function(){Panax Notoginseng$ ('. Wrap-music ')). Slidedown (); - }); the }); + varApp = Angular.module (' MyMusic ',[]) AApp.controller (' Musicctrl ',function($scope) { the + }); - functionPassvalue (obj) { $ varReturnValue =$ (obj). text (); $$ (' #music '). Val (returnvalue); -$ ('. Wrap-music '). Slideup (' fast ')); - } the</script> -Wuyi<body ng-app= "MyMusic" ng-controller= "Musicctrl" ng-init= "music=[' Polaris ' tears ', ' The most beautiful sun ', ' actors ', ' models ', ' tailored ', ' world ', ' like you '] "> the<div class= "Row" > -<div class= "col-md-12" > Wu<form class= "Form-horizontal form" > -<div class= "Form-group" > About<label for= "Music" class= "col-md-4 Control-label" > select song: </label> $<div class= "Col-md-4" > -<input type= "text" class= "Form-control" id= "Music" ng-model= "Bymusic" > -<ul class= "Wrap-music" > -<li onclick= "Passvalue (This)" ng-repeat= "X in music | Filter:bymusic ">{{x}}</li> A</ul> +</div> the</div> -</form> $</div> the</div> the</body> theSearch drop-down box
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
