通过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. 零基础学Python-第一章 ：Python介绍和安装-02.Python的发展历史与版本

    pthhon3.0对开发者带来了麻烦,因为2.0个3.0的程序并不是兼容的. 目前python3.0已经变成了真正的主力 官方版本和发行版 发行版会把常用的科学计算的包也给继承进来.这样就不用考虑包和 ...

  2. Qt widget使用QML自定义导航栏

    具体方法: https://www.cnblogs.com/judes/p/11359243.html qml: import QtQuick 2.0 import QtQuick 2.9 impor ...

  3. PL/SQL developer 开发小技能 and ash show command PL/SQL EXECUTE 以及注释

    ##sample  test windows 调试存储过程, 总体指导思想使用pl/sql test windows 调试存储过程,存储过程调试 可以用  run  to next exception ...

  4. Jquery操作表格多出一个内容行

    目录 前言 需求 如何监听每一行点击,获取点击id 前后端 问题更新,ajax异步带来的问题 废弃使用HTML拼接 前言 我的前端实在是太差劲了,导致Jquery操作表格多出一个内容行,这个功能我都做 ...

  5. 常见浏览器CSS hack方法总结

    ie6和ie7 #tip {*background:black; /*IE7 背景变黑色*/_background:orange; /*IE6 背景变橘色*/} IE8和IE9 :root .test ...

  6. NAT的配置

    实验的拓扑图如下所示 首先我们对路由器进行基础的地址配置 我们先在R2路由器上设置一条连接外网的静态路由 然后我们给PC1设置一个静态NAT 然后使得PC1 通过202.169.10.5 地址访问外网 ...

  7. activeMq学习应用

    一.下载 ActiveMQ 5.15.0下载地址 二.安装 解压apache-activemq-5.15.0-bin.zip D:\apache-activemq-5.15.7-bin\apache- ...

  8. SpringBoot部署到Linux上AppserverApplication,访问不到控制层

    放在本地是好好的,可以请求到,放到Linux上去的话就直接404, 解决办法: SpringBoot有个加载类叫AppserverApplication.这个大家应该都知道,我们平常都是如下写: @S ...

  9. Bean配置

    1.xml配置(摘抄自:https://www.cnblogs.com/zyx1301691180/p/7665971.html) 一.setter方法配置Bean: 1.创建一个 Spring Be ...

  10. Java设计模式：23种设计模式（转）

    单例(Singleton)模式:某个类只能生成一个实例,该类提供了一个全局访问点供外部获取该实例,其拓展是有限多例模式. 原型(Prototype)模式:将一个对象作为原型,通过对其进行复制而克隆出多 ...