使用Bootrap和Vue实现仿百度搜索功能
更新时间：2017年10月26日 10:34:03 作者：kodeliang
这篇文章主要介绍了使用Bootrap和Vue实现仿百度搜索功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下
用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实现仿百度搜索功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
Vue中使用JWT进行身份认证也是一种常见的方式,它能够更好地保护用户的信息,本文主要介绍了Vue开发中Jwt的使用详解,具有一定的参考价值,感兴趣的可以了解一下2023-12-12
这篇文章主要介绍了vue项目持久化存储数据的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了nuxt中刷新页面后防止store值丢失问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要为大家详细介绍了Vue自定义可以选择日期区间段的日历插件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
文章介绍了如何在Vue3和Beego中配置跨域请求,在Beego的router.go文件的init函数中添加option函数来回应预检请求,以支持跨域请求,这是个人经验分享,希望能帮助到大家2025-01-01
这篇文章主要给大家介绍了关于vue中data改变后让视图同步更新的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要介绍了深入了解Vue动态组件和异步组件的相关资料，帮助大家更好的理解和学习vue组件的相关知识，感兴趣的朋友可以了解下2021-01-01
这篇文章主要介绍了vue如何清除浏览器历史栈，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章要给大家介绍的是vue和drf以及第三方滑动验证码接入的实现，下文小编讲详细讲解该内容，感兴趣的小伙伴可以和小编一起来学习奥2021-10-10
再次遇到监听子组件收到父组件传过来的值,如果这个值变化,页面中的值发现是不会跟着同步变化的,本文给大家介绍Vue2 watch监听props的值,感兴趣的朋友一起看看吧2023-12-12
最新评论