<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿百度搜索-vuejs</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/2.0.1/bootstrap.min.js"></script>
<style>
.gray,.list-group li:hover{
background:#ccc;
cursor: pointer;
}
.list-group{
border: 1px solid #ccc;
border-top: none;
width: 100%;
position: absolute;
top: 40px;
margin-top: -4px;
border-radius: 3px;
}
.list-group li{
padding: 10px;
border: 0;
}
.container{
width:600px
}
.con-inner{
position: relative;
}
.form-group{
margin-bottom: 0;
}
body{
background: url(https://ss0.bdstatic.com/l4oZeXSm1A5BphGlnYG/skin/59.jpg?2) no-repeat;
}
</style>
<script src="https://cdn.bootcss.com/vue/1.0.25-csp/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.0.1/vue-resource.js"></script>
<script>
window.onload = function(){
new Vue({
el:'#box',
data:{
myData:[],
t:'',
now:-1
},
methods:{
get:function(ev){
if(ev.keyCode == 38 || ev.keyCode == 40)return;//如果是上/下按键则不请求数据
if(ev.keyCode ==13 || ev.type=='click'){//回车键或点击列表打开查询页面
window.open('https://www.baidu.com/s?wd='+this.t)
this.t1='';
}
if(ev.type =='click'){
this.t = ev.target.innerText
}
//jsonp请求数据
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{params: {wd:this.t},jsonp:'cb'})
.then(function(res){
this.myData=res.data.s
},function(res){
alert(res.status)
})
},
changeDown:function(ev){//上按键
this.now++;
if(this.now==this.myData.length){
this.now = 0
};
this.t = this.myData[this.now]
},
changeUp:function(){//下按键
this.now--;
if(this.now==-2){
this.now = this.myData.length -1
};
this.t = this.myData[this.now]
}
}
})
}
</script>
</head>
<body>
<div class="container" id="box">
<h1 class="text-center"><img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white_fe6da1ec.png"></h1>
<div class="con-inner">
<div class="form-group">
<input type="text" class="form-control" @keyup='get($event)' v-model='t' @keydown.down='changeDown()' @keydown.up.prevent='changeUp()'/>
</div>
<ul class="list-group">
<li class="list-group-item" v-for="item in myData" :class='{gray:$index==now}' @click='get($event)'>{{item}}</li>
</ul>
<p v-if='myData.length==0' class="text-info text-center">暂无数据。。。</p>
</div>
</div>
</body>
</html>
网友评论