使用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 相关文章推荐
Extjs学习笔记之三 extjs form更多的表单项
Jan 07 Javascript
js window.print实现打印特定控件或内容
Sep 16 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
Nov 22 Javascript
详谈jQuery中的this和$(this)
Nov 13 Javascript
原生JavaScript实现异步多文件上传
Dec 02 Javascript
javascript 数组的定义和数组的长度
Jun 07 Javascript
AngularJS变量及过滤器Filter用法分析
Nov 22 Javascript
JS控件bootstrap suggest plugin使用方法详解
Mar 25 Javascript
vue封装第三方插件并发布到npm的方法
Sep 25 Javascript
微信小程序 POST请求的实例详解
Sep 29 Javascript
Node 使用express-http-proxy 做api网关的实现
Oct 15 Javascript
vue前端工程的搭建
Mar 31 Vue.js
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
Linux下安装PHP MSSQL扩展教程
2014/10/24 PHP
PHP静态文件生成类实例
2014/11/29 PHP
PHP中生成UUID自定义函数分享
2015/06/10 PHP
PHP函数积累总结
2019/03/19 PHP
Laravel-admin之修改操作日志的方法
2019/09/30 PHP
JavaScript 选中文字并响应获取的实现代码
2011/08/28 Javascript
基于jquery实现点击左右按钮图片横向滚动
2013/04/11 Javascript
jquery Validation表单验证使用详解
2020/09/12 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
JS实现将链接生成二维码并转为图片的方法
2018/03/17 Javascript
最简单的vue消息提示全局组件的方法
2019/06/16 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
django框架model orM使用字典作为参数,保存数据的方法分析
2019/06/24 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
Python Tkinter Entry和Text的添加与使用详解
2020/03/04 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
草莓巧克力:Shari’s Berries
2017/02/07 全球购物
法国二手MacBook销售网站:Okamac
2019/03/18 全球购物
法律专业学生的自我评价
2014/02/07 职场文书
企业出纳岗位职责
2014/03/12 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
民事诉讼授权委托书范文
2014/08/02 职场文书
大学入学感言
2015/08/01 职场文书
青年文明号创建口号大全
2015/12/25 职场文书
pytorch中F.avg_pool1d()和F.avg_pool2d()的使用操作
2021/05/22 Python
Mysql 设置boolean类型的操作
2021/06/04 MySQL