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

人气：425 时间：2019-04-07

这篇文章主要为大家详细介绍了vue实现百度搜索下拉提示功能实例，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随四海网的小编两巴掌来看看吧！

这段代码用到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>

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

本文来自：http://www.q1010.com/184/3427-0.html

注：关于vue实现百度搜索下拉提示功能实例的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js

您可能感兴趣的文章

上一篇：vue中将网页打印成pdf实例代码

下一篇：分析vue-router2.0动态路由获取参数