使用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实现仿百度搜索功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • windows下vue-cli导入bootstrap样式

    1.先安装好vue-cli,如果还没有安装好的可以参考:<windows下vue-cli及webpack 构建网站(一)环境安装> 2.安装好之后Vue的欢迎界面,我们要做个例子导入bootstrap的样式,就先去复制一份bootstrap的导航样式过来替换掉Vue的欢迎页面吧,打开Src文件夹下面的components组件目录,然后打开 Hello.vue文件,把 <h1>{{ msg }}</h1> <h2>Essential Links</h2&

  • vue中如何引入jQuery和Bootstrap

    这两天学习了Vue.js ,所以,今天添加一点小笔记. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery --save-dev  这样就将jquery安装到了这个项目中. 然后修改webpack.base.conf.js(在build文件下)两个地方: 1:加入 var webpack=require('webpack'); 2 在module.exports的里面加入 plugins: [ new webpack.opt

  • Vue.js结合bootstrap实现分页控件

    本文为大家分享了使用vue.js结合bootstrap 开发的分页控件,供大家参考,具体内容如下 效果如下 实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit

  • Vue.js bootstrap前端实现分页和排序

    写之前先抱怨几句.本来一心一意做.net开发的,渐渐地成了只做前端.最近项目基本都用java做后台,我们这些.net的就成了前端,不是用wpf做界面,就是用html写web页面. 深知自己前端技术不足,以前虽说用asp.net前后台都做,但是,对于前端都是用现成的js库和页面模板,对于vue.js等框架基本没有接触过. 只怪自己不会写java,最近做一个项目,负责前端,后台传来数据不分页,前端收到所有数据后自己分页.我尽是无语. 正好最近在看vue.js.这个页面就用它来实现吧.顺便总结下. 效

  • vue2.0 与 bootstrap datetimepicker的结合使用实例

    1.在很多的项目中,我们都会用到日期插件,然后当我在vue中使用bootstrap datetimepicker时发现双向绑定不起作用了,bootstrap datetimepicker修改的日期不会同步到data中,下面看我的解决方案: <template> <div id="time"> <span class="select-box-title">选择发送时间:</span> <input class=&q

  • 详解vue-cli快速构建项目以及引入bootstrap、jq

    vue-cli脚手架工具快速构建项目架构: ..首先默认了有已经安装了node... npm install -g vue-cli                   全局安装vue-cli vue init webpack cnm                  生成项目名为cnm的的项目模板,cnm自定义 npm install                                   到cnm文件夹中打开Git bash或者命令窗口初始化安装依赖 此时文件夹目录应该是这样 然后

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

    用Vue调用百度的搜索接口,实现简单的搜索功能. 搜索框的样式是基于Bootstrap,当然对样式做了简单的调整, 使之类似于百度搜索.代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>百度搜索</title> <style type="text/css"> .gray{ background-color

  • 使用 Vue.js 仿百度搜索框的实例代码

    整理文档,搜刮出一个使用 Vue.js 仿百度搜索框的实例代码,稍微整理精简一下做下分享. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue demo</title> <style type="text/css"> .bg { background: #ccc; } </style> <s

  • Vue 仿百度搜索功能实现代码

    无上下选择 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jsonp</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, us

  • Vue仿百度搜索功能

    简述 学习vue的第二节,由于2.0版本并不向下兼容,视频中的不少内不能实现.下面列出一些主要知识点 // v-on 可简写为@ // 事件冒泡是指当点击div内部的button触发show1()时,必然会冒泡到div上执行show2(),这才层级div中很常见 // 阻止冒泡,原生js法,设置事件对象的cancelBubble属性为true // vue方法@click.stop // 阻止默认行为,原生js法,设置事件对象的preventDefault属性为true // vue方法@con

  • jQuery 插件仿百度搜索框智能提示(带Value值)

    因公司需要做一个仿百度搜索框,并且带Value值的, 网上找了下只有Text, 都没带Value的 所以做了个. 直接贴代码. 复制代码 代码如下: (function($) { var timeid; var lastValue; var options; var c; var d; var t; $.fn.autoComplete = function(config) { c = $(this); var defaults = { width: c.width(), //提示框的宽度 默认跟

  • vue实现百度搜索功能

    本文实例为大家分享了vue实现百度搜索功能的具体代码,供大家参考,具体内容如下 最终效果: Baidusearch.vue所有代码: <template> <div> <div class="container" id="app"> <div class="page-header"> <h2 class=" text-center text-primary">百度搜索

  • JS 实现百度搜索功能

    今天我们来用JS实现百度搜索功能,下面上代码: HTML部分: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--百度iocn图标--> <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" rel="external nofol

  • php+ajax做仿百度搜索下拉自动提示框(有实例)

    php+mysql+ajax实现百度搜索下拉提示框 主要有3个文件三个文件在同一个目录里 如下图 下面是三个文件的代码 把sql文件导入到mysql数据库里 修改下数据库密码为自己的 记得哦是UTF-8编码 php+mysql+ajax实现百度搜索下拉提示框 效果图 rpc.php文件 复制代码 代码如下: <?php mysql_connect('localhost', 'root' ,''); mysql_select_db("test"); $queryString = $

  • JS仿百度搜索自动提示框匹配查询功能

    1. 添加动态加载css文件 不需要引入css css全部在JS动态生成.2. 不需要额外的标签 只需要一个input输入框 并且默认指定一个class类名为 "inputElem" 当然也可以自己配置参数 还需要一个当前父级容器增加一个默认类名 parentCls(也可以自己配置),因为输入框匹配值后需要一个隐藏域 所以需要隐藏域增加一个class "hiddenCls" 当然也支持自己配置参数. 如下代码: 复制代码 代码如下: <div class=&q

  • Jquery插件仿百度搜索关键字自动匹配功能

    本文实例为大家分享了Jquery搜索关键字自动匹配功能的实现代码,供大家参考,具体内容如下 jQuery AutoComplete 是一个基于jQuery实现搜索关键字自动匹配提示的插件,该插件可扩展性强,表现性能优越,方便整合到自己的项目中使用:兼容IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+, and Chrome 1.0+ 等主流浏览器. 下面是具体的使用方法: 1.使用设置 首页,要把插件的js代码嵌入到你自己的项目中去. 复制代码 代码如下: <scr

随机推荐