angularJs-$http實現百度搜索時的動態(tài)下拉框示例
更新時間：2018年02月27日 16:00:53 作者：Charles_pig
下面小編就為大家分享一篇angularJs-$http實現百度搜索時的動態(tài)下拉框示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
實例如下所示：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
overflow: hidden;
margin-top: 50px;
margin-left: 500px;
}
.container{
width: 250px;
padding: 0;
}
.container li{
list-style: none;
border: 1px dotted gray;
width: inherit;
}
</style>
</head>
<body>
<div ng-controller="myCtrl">
<input type="text" ng-model="name" placeholder="請輸入內容..." ng-keyup="change(name)"/>
<input type="button" name="" id="" value="搜索" ng-click="change(name)"/>
<ul class="container">
<li ng-repeat=" d in mes">{vvxyksv9kd}</li>
</ul>
</div>
</body>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="angular-ui-router.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope,$http,$timeout){
$scope.mes = [] ;
var timer = null ;
$scope.change = function(name){
$timeout.cancel(timer);
timer = $timeout(function(){
$http({
method:"JSONP",
url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+name+"&json=1&p=3&sid=&req=2&csor=8&cb=JSON_CALLBACK"
})
.success(function(data){
$scope.mes = data.s;
console.log(data.s);
})
},500)
}
})
</script>
</html>
以上這篇angularJs-$http實現百度搜索時的動態(tài)下拉框示例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了AngularJS變量及過濾器Filter用法,結合實例形式分析了AngularJS變量、過濾器及自定義過濾器的相關用法與注意事項,需要的朋友可以參考下2016-11-11
這篇文章主要為大家詳細介紹了angular分頁指令操作的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
不知道大家有沒有發(fā)現在用AngularJS作為前端搭建個人博客的時候，發(fā)現用AngularJs輸出html的時候，瀏覽器并不解析這些html標簽，這里我們需要其顯示angular輸出的html能被瀏覽器解析怎么辦呢？不知道Angularjs如何實現這種功能的通過這篇文章來看看吧。2016-09-09
AngularJS基礎 ng-disabled 指令詳解及簡單示例
本文主要介紹AngularJS ng-disabled 指令,這里幫大家整理了ng-disabled指令的基礎指令,并附示例代碼,有需要的小伙伴參考下2016-08-08
這篇文章主要為大家詳細介紹了AngularJS實現表單驗證功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
ngrx是一套利用RxJS的類庫，下面這篇文章主要給大家介紹了關于Angular X中使用ngrx的方法，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-07-07
這篇文章主要為大家詳細介紹了AngularJS表單驗證,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了AngularJS自定義表單驗證功能,結合完整實例形式詳細分析了AngularJS實現表單驗證的相關指令、模型綁定、數據驗證等操作技巧,需要的朋友可以參考下2018-08-08
本篇文章主要介紹了AngularJs ng-change事件/指令的小結，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了AngularJS實現的簡單拖拽功能,涉及AngularJS事件響應及頁面元素屬性動態(tài)操作相關實現技巧,需要的朋友可以參考下2018-01-01