通过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. [原]将BITMAPINFO保存成bmp文件，以及渲染到设备

    /* class Image { public: Image() = delete; Image(const uint32_t& _w, const uint32_t& _h) :w( ...

  2. Mysql的三种数据类型

    Mysql的三种数据类型 1.数值类型 2.日期和时间类型 3.字符串类型 00x1 [数值类型] 00x2 [日期和时间类型] 00x3 [字符串类型]

  3. Linux_CentOS用户管理 和 用户权限管理 chmod、ACL、 visudo

    一.用户管理 Linux 系统同时可以支持多个用户,每个用户对自己的文件设备有特殊的权利,能够保 证用户之间互不干扰.就像手机开了助手一样,同时登陆多个 qq 账号,当硬件配置非常高 时,每个用户还可 ...

  4. percona mysql5.7进程出现大量unauthenticated user解决记录

    现象:http://task.chinasoft.com.wx/ 所有任务能打开,我的任务打开很慢 有些人能用,有些人不能用,数据库出现大量的未认证用户连接,连接数利用率超过70% 重启nginx,a ...

  5. Python3入门（十三）——常用内置模块之摘要模块hashlib/hmac

    (1)hashlib hashlib提供了常见摘要算法:如MD5,SHA1等等 一个md5的加密示例如下: import hashlib m = hashlib.md5() m.update(&quo ...

  6. [转载]Java迭代器(iterator详解以及和for循环的区别)

    Java迭代器(iterator详解以及和for循环的区别) 觉得有用的话,欢迎一起讨论相互学习~[Follow] 转载自 https://blog.csdn.net/Jae_Wang/article ...

  7. 增强篇6 CMOD增强删除

    CMOD实施了一个增强,但是不需要了,怎么删除呢? 要删除PPCO0005 这个增强,进入编辑状态,发现没有删除按钮,  把PPCO0005 这项删除掉 敲回车,厉害了,他又回来了,所以在这里是没法删 ...

  8. Swift4.0复习操作符方法与操作符的定制

    1.对已有操作符的重载: 2.可定制的操作符: 3.定制前缀操作符: 4.定制后缀操作符: 5.定制中缀操作符:

  9. [LeetCode] 855. Exam Room 考场

    In an exam room, there are N seats in a single row, numbered 0, 1, 2, ..., N-1. When a student enter ...

  10. 【Tools】三款笔记本电脑硬件检测工具-官网下载

    一.CPU-Z 下载地址: https://www.cpuid.com/softwares/cpu-z.html 描述: CPU-Z已经是大名鼎鼎了.这里就不多说了.  二.Cinebench   下 ...