通过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. Android 打开相册拍照选择多张图片显示

    添加依赖: compile 'me.iwf.photopicker:PhotoPicker:0.1.8' compile 'com.jaeger.ninegridimageview:library:1 ...

  2. 十一、postman接口测试（安装nodejs和npm）

    cmder安装:https://cmder.net/ node安装:https://nodejs.org/zh-cn/ 打开cmd命令,在命令提示窗输入 npm install -g cnpm --r ...

  3. SpringBoot启动嵌入式tomcat源码解读

    一.SpringBoot自动拉起Tomcat SpringBoot框架是当前比较流行的java后端开发框架,与maven结合大大简化了开发人员项目搭建的步骤,我们知道SpringBoot的启动类启动后 ...

  4. Python 保存数据的方法：

    open函数保存 使用with open()新建对象 写入数据(这里使用的是爬取豆瓣读书中一本书的豆瓣短评作为例子) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ...

  5. 软件定义网络基础---SDN的发展

    一:发展初期阶段--提出 架构.设计思想和实现技术的提出 二:发展中期阶段--企业加入,推动发展 三:SDN的发展趋势 (一)SD-DC SDN被大规模应用数据中心的服务器和设备部署运维,产生了软件定 ...

  6. java.net.NoRouteToHostException: Cannot assign requested address 问题分析(端口被用完的解决方法)

    问题: 错误原因: 由于liunx 分配的客户端连接端口用尽,无法建立socket连接所致,虽然socket正常关闭,但是端口不是立即释放,而是处于 TIME_WAIT 状态,默认等待60s后释放.查 ...

  7. 如何做ui自动化---步骤详解

    第一步: 得到功能测试的常规用例,查看是否可以进行自动化,要明确,自动化不是为了自动化而自动化,自动化是节省人力,主要做回归测试,如果变动性特别大,不建议做自动化,具体可查看其它文章“什么适合做自动化 ...

  8. Swift4.0复习结构体

    1.基本语法: /** 定义了一个结构体 */ struct Structure {   /// 一个常量存储式实例属性, /// 并直接为它初始化 let constProperty =   /// ...

  9. jquery img src赋值

    不用Jquery时:document.getElementById("imageId").src = "xxxx.jpg"; 用Jquery时:$(" ...

  10. Linux习题1

    1. GUN的含义是:     GNU's Not UNIX    . 2. Linux一般有3个主要部分:内核.命令解释层.实用工具. 3.POSIX是可携式操作系统接口的缩写,重点在规范核心与应用 ...