angular的仿百度搜索功能

尝试一下调用百度的搜索功能，这部分主要是练习$http。

首先HTML部分：

<div ng-app="myApp" ng-controller="Aaa"">
　　<input type="text" ng-model="name" ng-keyup="change(name)" placeholder="请输入搜索内容">//内容的搜索框
　　<input type="button" ng-click="change(name)" value="搜索">  // 搜索按钮
　　<ul>
　　　　<li ng-repeat="da in data">{{ da }}</li>  //搜索到的内容
　　</ul>
</div>

HTML布局完成，现在设置一下样式

CSS:

<style>
　　li{
　　　　width: 600px;
　　　　height: 30px;
　　　　list-style: none;
　　　　background: #b6b6b6;
　　　　color:purple;
　　　　margin-top: 20px;
}
</style>

接下来是js代码部分:

<script src="js/angular.min.js"></script> //先引包

<script>
　　var m1 = angular.module("myApp",[]);
　　　m1.controller("Aaa",["$scope","$http","$timeout",function($scope,$http,$timeout){
　　　　var timer=null;
　　　　$scope.data = [];   //先给一个容器
　　　　$scope.change = function(name){
　　　　　　$timeout.cancel(timer);  // 清除延迟器
　　　　　　timer=$timeout(function(){      // 加上延迟效果，不然在输入文字过程中会多次请求重复刷新
　　　　　　　　$http({
　　　　　　　　　　method:'JSONP',
　　　　　　　　　　url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+name+'&cb=JSON_CALLBACK'
// 百度用的jQ的方式，在angular中要改成JSON_CALLBACK才能收到回调信息。
　　　　　　　　}).success(function(data){
　　　　　　　　　　　　console.log(data);
　　　　　　　　　　　　$scope.data = data.s;
　　　　　　　　});
　　　　　　},400);
　　　　};
　　}]);
</script>

//这样一个简单的仿百度的搜索功能就实现了，如果出现问题就放在服务器下运行。

转载于:https://www.cnblogs.com/lee319/p/6906891.html