使用Bootrap和Vue实现仿百度搜索功能
程序员文章站
2022-09-08 13:49:27
用vue调用百度的搜索接口，实现简单的搜索功能。
搜索框的样式是基于bootstrap，当然对样式做了简单的调整， 使之类似于百度搜索。代码如下
<...
用vue调用百度的搜索接口，实现简单的搜索功能。
搜索框的样式是基于bootstrap，当然对样式做了简单的调整， 使之类似于百度搜索。代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>百度搜索</title>
<style type="text/css">
.gray{
background-color: #eee;
}
.listyle{
font-size: 16px;
line-height: 35px;
padding-left: 16px;
}
.ulstyle{
border:1px solid #ccc;
border-top: none;
}
</style>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" rel="external nofollow" >
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-resource.js"></script>
<script type="text/javascript">
window.onload = function(){
new vue({
el: ".container",
data: {
mydata:[],
txt:"",
nowindex:-1
},
methods:{
get:function(event){
if(event.keycode==38 || event.keycode==40){
return;
}
if(event.keycode==13){
window.open("https://www.baidu.com/s?wd="+this.txt);
this.txt="";
}
this.$http.jsonp("https://sp0.baidu.com/5a1fazu8aa54nxgko9wtanf6hhy/su",{
wd:this.txt
},{
jsonp:"cb"
}).then(function(res){
this.mydata=res.data.s
},function(res){
alert(res.status);
});
},
changedown:function(){
this.nowindex++;
if(this.nowindex==this.mydata.length){
this.nowindex=0;
this.txt=this.mydata[0];
}else{
this.txt=this.mydata[this.nowindex];
}
},
changeup:function(){
this.nowindex--;
if(this.nowindex==-1){
this.nowindex=this.mydata.length-1;
this.txt=this.mydata[this.nowindex];
}else{
this.txt=this.mydata[this.nowindex];
}
},
mouseover:function(n){
this.nowindex=n;
this.txt=this.mydata[this.nowindex];
},
getmsg:function(){
window.open("https://www.baidu.com/s?wd="+this.txt);
this.txt="";
}
}
});
}
</script>
</head>
<body>
<br>
<div class="container">
<div class="input-group">
<input type="text" class="form-control input-lg" placeholder="请输入关键字" v-model="txt" @keyup="get($event)" @keydown.down="changedown()" @keydown.up="changeup()">
<span class="input-group-btn">
<button class="btn btn-default btn-lg" type="button" @click="getmsg()">搜索</button>
</span>
</div>
<ul class="list-unstyled ulstyle" v-show="mydata.length!=0">
<li v-for="item in mydata" :class={gray:$index==nowindex,listyle:true} @mouseover="mouseover($index)" @click="getmsg()">{{item}}</li>
</ul>
</div>
</body>
</html>
实现效果如下
总结
以上所述是小编给大家介绍的使用bootrap和vue实现仿百度搜索功能，希望对大家有所帮助
上一篇： jquery实现倒计时小应用
下一篇： Angular实现响应式表单