angular-百度搜索

来源：互联网发布：日本人爱干净知乎编辑：程序博客网时间：2024/06/06 09:05
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}

#wei {
width: 500px;
height: 600px;
margin: 0auto;
border: 0pxsolid gray;
}

#wei input {
width: 476px;
height: 50px;
line-height: 50px;
padding-left: 20px;
font-size: 16px;
}

#wei ul {
height: auto;
border: 1pxsolid #ccc;
}

#wei ul li {
width: 100%;
height: 30px;
line-height: 30px;
text-indent: 10px;
font-size: 16px;
list-style: none;
}

#wei ul li a {
text-decoration: none;
}

#wei ul li:hover {
display: block;
background: #ccc;
color: #fff;
}

.gray {
background: #ccc;
}
</style>
<scriptsrc="./angular-1.4.7/angular.min.js"></script>
<script>
var App =angular.module('app', []);
App.controller('appController', ['$scope','$http', function ($scope,$http) {
// 用来储存数据
$scope.str = [];
var num=0;
$scope.num=num;
// 获取百度数据
$scope.change =function (data,e) {
$http({
"method":"jsonp",
"url":"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" +$scope.data +
"&cb=JSON_CALLBACK",
}).success(function (data) {
// 存储获取到数据
$scope.str =data.s; 
// 获取键值码 
var keycode=window.event?e.keyCode:e.which;
// 如果键值码等于40
if(keycode==40){
// 加一
num++; 
// 再判断一下如果num超出范围，回到最大值
if(num>$scope.str.length-1){
console.log($scope.str.length);
num=$scope.str.length-1;
}
// 根据index获取value值，model到页面
$scope.data=$scope.str[num];
console.log($scope.str[num]);
false;
// 如果键值码等于38
}else if(keycode==38){
// 减一
num--;
// 再判断一下如果num超出范围，回到0
if(num<0){
num=0;
};
}else{
// 否则等于0
num=0;
}
// 最终的num重新赋值到模型上
$scope.num=num;
});
}
}]);
</script>
</head>

<body>
<div id="wei" ng-app="app"ng-controller="appController">
<inputtype="text"ng-model="data"ng-keyup="change(data,$event)">
<ul>
<li ng-repeat="itm in str" ng-class="{gray:$index==num}">
<a href="https://www.baidu.com/s?wd={{itm}}">
{{$index}}
{{itm}}
</a>
</li>
</ul>
</div>
</body>

</html>
阅读全文
0 0