使用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 相关文章推荐
jQuery1.6 使用方法一
Nov 23 Javascript
js 取时间差去掉周六周日实现代码
Dec 25 Javascript
jQuery Animation实现CSS3动画示例介绍
Aug 14 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
Jan 20 Javascript
JQuery简单实现锚点链接的平滑滚动
May 03 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
jQuery下拉菜单的实现代码
Nov 03 Javascript
基于JS实现翻书效果的页面切换样式
Feb 16 Javascript
原生JS实现图片网格式渐显、渐隐效果
Jun 05 Javascript
JavaScript html5 canvas实现图片上画超链接
Oct 20 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
Vue+Element实现网页版个人简历系统(推荐)
Dec 31 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中使用模板的方法
2008/05/24 PHP
php 分页函数multi() discuz
2009/06/21 PHP
PHP学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
慎用preg_replace危险的/e修饰符(一句话后门常用)
2013/06/19 PHP
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
Jquery中dialog属性小记
2010/09/03 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
2012/03/07 Javascript
浅谈JavaScript数据类型
2015/03/03 Javascript
JavaScript性能优化总结之加载与执行
2016/08/11 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
基本DOM节点操作
2017/01/17 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
2017/08/17 Javascript
webpack多页面开发实践
2017/12/18 Javascript
微信小程序三级联动选择器使用方法
2020/05/19 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
python通过colorama模块在控制台输出彩色文字的方法
2015/03/19 Python
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
详解python单例模式与metaclass
2016/01/15 Python
深入解析Python中的descriptor描述器的作用及用法
2016/06/27 Python
CentOS 7下安装Python3.6 及遇到的问题小结
2018/11/08 Python
python Tornado框架的使用示例
2020/10/19 Python
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
大学应届生的自我评价
2014/03/06 职场文书
清明节寄语2015
2015/03/23 职场文书
实习指导老师意见
2015/06/04 职场文书
初中生物教学反思
2016/02/20 职场文书
Mysql - 常用函数 每天积极向上
2021/04/05 MySQL
Python pygame实现中国象棋单机版源码
2021/06/20 Python
Python面向对象编程之类的概念
2021/11/01 Python
解决linux下redis数据库overcommit_memory问题
2022/02/24 Redis
在Python 中将类对象序列化为JSON
2022/04/06 Python