通过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. Java基础 hello world基础实例

        JDK :OpenJDK-11      OS :CentOS 7.6.1810      IDE :Eclipse 2019‑03 typesetting :Markdown   code ...

  2. redis最大连接数

    Well, it's a bit late for this post, but since I just spent a lot of time(the whole night) to config ...

  3. Ajax serialize()提交form表单不能上传file类型

    前台form表单的提交方式有很多种,例如: 1. form表单submit直接提交的方法 2. Ajax提交的方法 3. jquery提交的方法 4. 原生js提交的方法 每一种方法都有它的优势和不足 ...

  4. libfacedetection环境配置

    E:\Opencv\libfacedetection_install1\include E:\Opencv\libfacedetection_install1\lib libfacedetect-x6 ...

  5. 【WebView】Android WebView中的Cookie操作

    Hybrid App(混合式应用)的开发过程中少不了与WebView的交互,在涉及到账户体系的产品中,包含了一种登录状态的传递.比如,在Native(原生)界面的登录操作,进入到Web界面时,涉及到账 ...

  6. String类型字符 常用的方法

    例子: String r=“我是谁” System.out.println(r.length())

  7. Swift 4.0 Xib实现Button调整

    1.Xib画的界面按钮,代码中进行调整按钮图片在上,文字在下: 代码中修改按钮的位置比较好: payButton.titleEdgeInsets = UIEdgeInsetsMake((payButt ...

  8. log4net使用简明教程，快看看哟

    在项目当中经常会遇到各种各样的问题,如何可以尽快找到问题,那么就只能靠日志了,所以一个系统的日志是否完备合理就尤为重要. 在日志管理插件中log4net相当流行,下面就简单说明一下使用方法. log4 ...

  9. Python：实现图片裁剪的两种方式——Pillow和OpenCV

    原文:https://blog.csdn.net/hfutdog/article/details/82351549 在这篇文章里我们聊一下Python实现图片裁剪的两种方式,一种利用了Pillow,还 ...

  10. git的使用学习（四）git的远程仓库

    1.远程仓库介绍 到目前为止,我们已经掌握了如何在Git仓库里对一个文件进行时光穿梭,你再也不用担心文件备份或者丢失的问题了. 可是有用过集中式版本控制系统SVN的童鞋会站出来说,这些功能在SVN里早 ...