通过vue的jsonp实现百度下拉菜单的请求，vue的版本是2.9.2

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script src="vue.min.js"></script>

     <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.3.4/vue-resource.min.js"></script>

     <style>

         .gray {

             background-color: #ccc;

         }

     </style>

     <script>

         window.onload = function () {

             new Vue({

                 el: '#box',

                 data: {

                     myData: [],  //搜索下拉数据列表

                     t1: '',      //输入框里的值

                     now: -1      //输入框里面的值得索引，0位列表第一项

                 },

                 methods: {

                     get: function (ev) {

                         if(ev.keyCode==38 || ev.keyCode==40){ //当按照上下键的时候停止搜索

                             return

                         }

                         if(ev.keyCode==13){

                             window.open('https://www.baidu.com/s?wd='+this.t1) //打开百度搜索

                         }

                         this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {

                             params: {

                                 wd: this.t1  // 输入的关键词

                             },

                             jsonp: 'cb'  //callback函数的名称

                         }).then(function (res) {

                           this.myData=res.data.s;

                           console.log(this.myData)

                         }, function (err) {

                             console.log(err.status);

                         });

                     },

                     changeDown: function () {  //向下选择

                         this.now++;

                         if (this.now == this.myData.length) { //判断是否超出列表长度

                             this.now = -1;

                         }

                         this.t1 = this.myData[this.now];  //改变输入框的值

                     },

                     changeUp: function () {  //向上选择

                         this.now--;

                         if (this.now == -2) {

                             this.now = this.myData.length - 1;

                         }

                         this.t1 = this.myData[this.now];

                     },

                     dataLink: function (index) {  //鼠标点击跳转

                         this.t1 = this.myData[index];

                         this.now = index;

                         window.open('https://www.baidu.com/s?wd=' + this.t1);

                         this.t1 = ''

                     }

                 }

             })

         }

     </script>

 </head>

 <body>

 <div id="box">

     <input type="text" v-model="t1" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()">

     <ul>

         <li v-for="(value,index) in myData" :class="{gray:index==now}">

             {{ value }}

         </li>

     </ul>

     <p v-show="myData.length==0">暂无数据...</p>

 </div>

 </body>

 </html>

vue的jsonp百度下拉菜单的更多相关文章

  1. Vue.js模拟百度下拉框

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. vue实现百度下拉框

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. 第一百四十六节，JavaScript，百度分享保持居中--下拉菜单

    JavaScript,百度分享保持居中--下拉菜单 百度分享保持居中 效果图 html代码 <div id="share"> <h2>分享到</h2& ...

  4. vue实现隔行换色，下拉菜单控制隔行换色的颜色

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. angular的跨域（angular百度下拉提示模拟）和angular选项卡

    1.angular中$http的服务: $http.get(url,{params:{参数}}).success().error(); $http.post(url,{params:{参数}}).su ...

  6. jQuery美化下拉菜单插件dropkick

    dropkick是一款基于jquery库的美化下拉框下拉菜单的插件,它通过定制HTML插入可使丑陋无聊的<select>下拉列表变得美丽. name属性是唯一一个必需的填写的,不过你也应该 ...

  7. excel设置下拉菜单，并且不同值会显示不同颜色

    工作中常常要用的excel,每次都会有新的需求,然后不会,然后百度,然后过段时间可能就又忘了,于是就想说,自己记录下来~~~因为自己用的都是2010,其实哪个版本都差不多,都是应该可以找到相应的按钮滴 ...

  8. bootstrap--组件之按钮式下拉菜单

    把任意一个按钮放入 .btn-group 中,然后加入适当的菜单标签,就可以让按钮作为菜单的触发器了. 简单的实现如下 Code<div class="btn-group"& ...

  9. Css之导航栏下拉菜单

    Css: /*下拉菜单学习-2017.12.17 20:17 added by ldb*/ ul{ list-style-type:none; margin:; padding:; overflow: ...

随机推荐

  1. svn: E205007: None of the environment variables SVN_EDITOR

    svn propedit svn:ignore .svn: E205007: None of the environment variables SVN_EDITOR, VISUAL or EDITO ...

  2. ISO/IEC 9899:2011 条款6.3——转换

    6.3 转换 1.有些操作符将操作数的值自动地从一种类型转换为另一种.本子条款指定了从这么一个隐式转换所要求的结果,以及从一个投射操作(一个显式转换)所要求的结果.在6.3.1.8中所列出的信息概括了 ...

  3. Spring cloud微服务安全实战-3-2 第一个API及注入攻击防护

    先来写一些用户的基础数据的管理的api.就是用户的基本的增删改查.用spring boot可以很容易的写出这种api 首先新建maven的项目 依赖关系 引入依赖.用最新的spring boot ht ...

  4. 初步了解 Netty

    精通并发与 Netty (一)如何使用 精通并发与 Netty Netty 是一个异步的,事件驱动的网络通信框架,用于高性能的基于协议的客户端和服务端的开发. 异步指的是会立即返回,并不知道到底发送过 ...

  5. 【转】JS中处理Number浮点数精度问题

    https://github.com/dt-fe/number-precision ~(function(root, factory) { if (typeof define === "fu ...

  6. windows强大的快捷键

    1 电脑锁屏 有些时候,需要暂时离开座位去处理其他事,可是电脑还有数据再跑. 关掉的话,数据就白跑了,不关的话,又不想让别人看到我电脑的资料. 那么就按住windows键后,再按L键. 这样电脑就直接 ...

  7. code and dataset resources of computer vision

    From:http://rogerioferis.com/VisualRecognitionAndSearch2014/Resources.html Source Code Non-exhaustiv ...

  8. quartz定时任务存储

    今天不聊quartz的概念,像任务bean,触发器,调度器这些随随便便都可以百度到,其中任务bean要实现job接口.对于这些创建生成的定时任务,它可以保存在内存中,重启失效,也可以保存在数据库里重启 ...

  9. RabbitMQ基础命令rabbitmqctl

    官网文档 https://www.rabbitmq.com/rabbitmqctl.8.html 一般操作命令后台管理页面都有的,部分没有(应用程序管理,和集群管理). 直接使用命令,必须配置环境变量 ...

  10. Redis搭建Windows平台

    安装程序下载 从官网下载安装程序. https://redis.io/download https://github.com/MicrosoftArchive/redis/releases 新地址:h ...