vue实现百度搜索下拉提示功能实例

2019-11-19 16:20:22

字体：大中小

来源：转载

供稿：网友

这段代码用到vuejs和vue-resouece。实现对接智能提示接口，并通过上下键选择提示项，按enter进行搜索

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript" src="vue-resource.js"></script> <script type="text/javascript"> window.onload = function() {  var app = new Vue({   el: '#box',   data: {    myData: [],    tt: '',    now: -1   },   methods: {    get: function(e) {     // 请求限制 按了上下箭头     if (e.keyCode === 38 || e.keyCode === 40) {      return     }     // enter跳转     if (e.keyCode === 13) {      window.open('https://www.baidu.com/s?wd=' + this.tt);      this.tt = '';     }     this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {      wd: this.tt     }, {      jsonp: 'cb'     }).then(function(res) {      // 请求成功      this.myData = res.data.s;　　　　　　　　this.now = -1;     }, function(res) {      // 请求失败      console.log(res.status)     })    },    changeDown: function() {     this.now++;     // 到了最后一个选项     if (this.now === this.myData.length) {      this.now = -1;     }     this.tt = this.myData[this.now]    },    changeUp: function() {     this.now--;     // 到了第一个选项     if (this.now === -2) {      this.now = this.myData.length - 1;     }     this.tt = this.myData[this.now]    }   }  }) } </script> <style type="text/css"> .gray {  background: gray } </style></head><body> <!-- 百度下拉接口 --> <div id="box">  <input type="text" v-model="tt" name="" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up="changeUp()">  <ul>   <li v-for="(item, index) in myData" :class="{gray:index===now}">{{item}}</li>  </ul> </div></body></html>

效果图：

这个ajax请求没有做节流，很多时候需要限制ajax频繁请求，可以小改一下：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript" src="vue-resource.js"></script> <script type="text/javascript"> window.onload = function() {  var app = new Vue({   el: '#box',   data: {    myData: [],    tt: '',    now: -1   },   methods: {    get: function(e) {     // 请求限制 按了上下箭头     if (e.keyCode === 38 || e.keyCode === 40) {      return     }     // enter跳转     if (e.keyCode === 13) {      window.open('https://www.baidu.com/s?wd=' + this.tt);      this.tt = '';     }     // 限制频繁请求     this.throttle(this.getData,window)    },    changeDown: function() {     this.now++;     // 到了最后一个选项     if (this.now === this.myData.length) {      this.now = -1;     }     this.tt = this.myData[this.now]    },    changeUp: function() {     this.now--;     // 到了第一个选项     if (this.now === -2) {      this.now = this.myData.length - 1;     }     this.tt = this.myData[this.now]    },    // 把请求单独拿出来    getData() {     this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {      wd: this.tt     }, {      jsonp: 'cb'     }).then(function(res) {      // 请求成功      this.myData = res.data.s;　　　　　　　　this.now = -1;     }, function(res) {      // 请求失败      console.log(res.status)     })    },    // 节流函数    throttle(method,context){      clearTimeout(method.tId);      method.tId=setTimeout(function(){        method.call(context);      },300);    }   }  }) } </script> <style type="text/css"> .gray {  background: gray } </style></head><body> <!-- 百度下拉接口 --> <div id="box">  <input type="text" v-model="tt" name="" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up="changeUp()">  <ul>   <li v-for="(item, index) in myData" :class="{gray:index===now}">{{item}}</li>  </ul> </div></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：微信小程序动态添加分享数据

下一篇：JS查找数组中重复元素的方法详解