vue的jsonp百度下拉菜單
阿新 • • 發佈：2018-01-27
菜單 win jsonp hang 請求 下拉菜單 bsp tps col
通過vue的jsonp實現百度下拉菜單的請求，vue的版本是2.9.2
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="vue.min.js"></script> 7 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.3.4/vue-resource.min.js"></script> 8 <style> 9 .gray { 10 background-color: #ccc; 11 } 12 </style> 13 <script> 14 window.onload = function () { 15 new Vue({ 16 el: ‘#box‘, 17 data: { 18 myData: [],//搜索下拉數據列表 19 t1: ‘‘, //輸入框裏的值 20 now: -1 //輸入框裏面的值得索引，0位列表第一項 21 }, 22 methods: { 23 get: function (ev) { 24 if(ev.keyCode==38 || ev.keyCode==40){ //當按照上下鍵的時候停止搜索 25 return26 } 27 if(ev.keyCode==13){ 28 window.open(‘https://www.baidu.com/s?wd=‘+this.t1) //打開百度搜索 29 } 30 this.$http.jsonp(‘https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su‘, { 31 params: { 32 wd: this.t1 // 輸入的關鍵詞 33 }, 34 jsonp: ‘cb‘ //callback函數的名稱 35 }).then(function (res) { 36 this.myData=res.data.s; 37 console.log(this.myData) 38 }, function (err) { 39 console.log(err.status); 40 }); 41 }, 42 changeDown: function () { //向下選擇 43 this.now++; 44 if (this.now == this.myData.length) { //判斷是否超出列表長度 45 this.now = -1; 46 } 47 this.t1 = this.myData[this.now]; //改變輸入框的值 48 }, 49 changeUp: function () { //向上選擇 50 this.now--; 51 if (this.now == -2) { 52 this.now = this.myData.length - 1; 53 } 54 this.t1 = this.myData[this.now]; 55 }, 56 dataLink: function (index) { //鼠標點擊跳轉 57 this.t1 = this.myData[index]; 58 this.now = index; 59 window.open(‘https://www.baidu.com/s?wd=‘ + this.t1); 60 this.t1 = ‘‘ 61 } 62 } 63 }) 64 } 65 </script> 66 </head> 67 <body> 68 <div id="box"> 69 <input type="text" v-model="t1" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()"> 70 <ul> 71 <li v-for="(value,index) in myData" :class="{gray:index==now}"> 72 {{ value }} 73 </li> 74 </ul> 75 <p v-show="myData.length==0">暫無數據...</p> 76 </div> 77 78 </body> 79 </html>
vue的jsonp百度下拉菜單