使用Bootrap和Vue实现仿百度搜索功能


Posted in Javascript onOctober 26, 2017

用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实现仿百度搜索功能

使用Bootrap和Vue实现仿百度搜索功能

总结

以上所述是小编给大家介绍的使用Bootrap和Vue实现仿百度搜索功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS 文件传参及处理技巧分析
May 13 Javascript
javascript如何动态加载表格与动态添加表格行
Nov 27 Javascript
详解JavaScript 中的 replace 方法
Jan 01 Javascript
jQuery Mobile动态刷新页面样式的实现方法
May 28 Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
Feb 03 Javascript
nginx部署访问vue-cli搭建的项目的方法
Feb 12 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 Javascript
vue 组件销毁并重置的实现
Jan 13 Javascript
vue路由跳转传递参数的方式总结
May 10 Javascript
解决vue项目router切换太慢问题
Jul 19 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
Oct 26 #Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 #Javascript
webpack3之loader全解析
Oct 26 #Javascript
JS使用正则表达式找出最长连续子串长度
Oct 26 #Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 #Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 #Javascript
详谈构造函数加括号与不加括号的区别
Oct 26 #Javascript
You might like
php urlencode()与urldecode()函数字符编码原理详解
2011/12/06 PHP
浏览器预览PHP文件时顶部出现空白影响布局分析原因及解决办法
2013/01/11 PHP
Yii列表定义与使用分页方法小结(3种方法)
2016/07/15 PHP
TopList标签和JavaScript结合两例
2007/08/12 Javascript
读jQuery之十二 删除事件核心方法
2011/07/31 Javascript
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
使用js判断控件是否获得焦点
2014/01/03 Javascript
AngularJS 入门教程之事件处理器详解
2016/08/19 Javascript
详解JavaScript中的属性和特性
2016/12/08 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
最常用的jQuery表单验证(简单)
2017/05/23 jQuery
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
jQuery实现的简单手风琴效果示例
2018/08/29 jQuery
原生js+css调节音量滑块
2020/01/15 Javascript
微信小程序实现手指拖动选项排序
2020/04/22 Javascript
vant组件中 dialog的确认按钮的回调事件操作
2020/11/04 Javascript
详解Python的Lambda函数与排序
2016/10/25 Python
python连接、操作mongodb数据库的方法实例详解
2019/09/11 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
button在IE6/7下的黑边去除方案
2012/12/24 HTML / CSS
html5通过postMessage进行跨域通信的方法
2017/12/04 HTML / CSS
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
大学四年个人的自我评价
2014/02/26 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
长城的导游词
2015/01/30 职场文书
故意杀人案辩护词
2015/05/21 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书
《跨越海峡的生命桥》教学反思
2016/02/18 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书
golang DNS服务器的简单实现操作
2021/04/30 Golang
教你怎么用PyCharm为同一服务器配置多个python解释器
2021/05/31 Python
MySQL分区路径子分区再分区
2022/04/13 MySQL