手册   游戏   WEB   字典   单词   在线工具  

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

这里有新鲜出炉的vue.js 教程，程序狗速度看过来！

vue.js 轻量级 JavaScript 框架

Vue.js 是构建 web 界面的 JavaScript 库，提供数据驱动的组件，还有简单灵活的 API，使得 MVVM 更简单。

这篇文章主要介绍了vue实现百度搜索下拉提示功能实例,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>
  7.             Document
  8.         </title>
  9.         <script type="text/javascript" src="vue.js">
  10.         </script>
  11.         <script type="text/javascript" src="vue-resource.js">
  12.         </script>
  13.         <script type="text/javascript">
  14.             window.onload = function() {
  15.                 var app = new Vue({
  16.                     el: '#box',
  17.                     data: {
  18.                         myData: [],
  19.                         tt: '',
  20.                         now: -1
  21.                     },
  22.                     methods: {
  23.                         get: function(e) {
  24.  
  25.                             // 请求限制 按了上下箭头
  26.                             if (e.keyCode === 38 || e.keyCode === 40) {
  27.                                 return
  28.                             }
  29.                             // enter跳转
  30.                             if (e.keyCode === 13) {
  31.                                 window.open('https://www.baidu.com/s?wd=' + this.tt);
  32.                                 this.tt = '';
  33.                             }
  34.                             this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
  35.                                 wd: this.tt
  36.                             },
  37.                             {
  38.                                 jsonp: 'cb'
  39.                             }).then(function(res) {
  40.                                 // 请求成功
  41.                                 this.myData = res.data.s;this.now = -1;
  42.                             },
  43.                             function(res) {
  44.                                 // 请求失败
  45.                                 console.log(res.status)
  46.                             })
  47.                         },
  48.                         changeDown: function() {
  49.                             this.now++;
  50.                             // 到了最后一个选项
  51.                             if (this.now === this.myData.length) {
  52.                                 this.now = -1;
  53.                             }
  54.                             this.tt = this.myData[this.now]
  55.                         },
  56.                         changeUp: function() {
  57.                             this.now--;
  58.                             // 到了第一个选项
  59.                             if (this.now === -2) {
  60.                                 this.now = this.myData.length - 1;
  61.                             }
  62.                             this.tt = this.myData[this.now]
  63.  
  64.                         }
  65.                     }
  66.                 })
  67.             }
  68.         </script>
  69.         <style type="text/CSS">
  70.             .gray { background: gray }
  71.         </style>
  72.     </head>
  73.     
  74.     <body>
  75.         <!-- 百度下拉接口 -->
  76.         <div id="box">
  77.             <input type="text" v-model="tt" name="" @keyup="get($event)" @keydown.down="changeDown()"
  78.             @keydown.up="changeUp()">
  79.             <ul>
  80.                 <li v-for="(item, index) in myData" :class="{gray:index===now}">
  81.                     {{item}}
  82.                 </li>
  83.             </ul>
  84.         </div>
  85.     </body>
  86.  
  87. </html>

效果图：

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>
  7.             Document
  8.         </title>
  9.         <script type="text/javascript" src="vue.js">
  10.         </script>
  11.         <script type="text/javascript" src="vue-resource.js">
  12.         </script>
  13.         <script type="text/javascript">
  14.             window.onload = function() {
  15.                 var app = new Vue({
  16.                     el: '#box',
  17.                     data: {
  18.                         myData: [],
  19.                         tt: '',
  20.                         now: -1
  21.                     },
  22.                     methods: {
  23.                         get: function(e) {
  24.  
  25.                             // 请求限制 按了上下箭头
  26.                             if (e.keyCode === 38 || e.keyCode === 40) {
  27.                                 return
  28.                             }
  29.                             // enter跳转
  30.                             if (e.keyCode === 13) {
  31.                                 window.open('https://www.baidu.com/s?wd=' + this.tt);
  32.                                 this.tt = '';
  33.                             }
  34.                             // 限制频繁请求
  35.                             this.throttle(this.getData, window)
  36.                         },
  37.                         changeDown: function() {
  38.                             this.now++;
  39.                             // 到了最后一个选项
  40.                             if (this.now === this.myData.length) {
  41.                                 this.now = -1;
  42.                             }
  43.                             this.tt = this.myData[this.now]
  44.                         },
  45.                         changeUp: function() {
  46.                             this.now--;
  47.                             // 到了第一个选项
  48.                             if (this.now === -2) {
  49.                                 this.now = this.myData.length - 1;
  50.                             }
  51.                             this.tt = this.myData[this.now]
  52.  
  53.                         },
  54.                         // 把请求单独拿出来
  55.                         getData() {
  56.                             this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
  57.                                 wd: this.tt
  58.                             },
  59.                             {
  60.                                 jsonp: 'cb'
  61.                             }).then(function(res) {
  62.                                 // 请求成功
  63.                                 this.myData = res.data.s;this.now = -1;
  64.                             },
  65.                             function(res) {
  66.                                 // 请求失败
  67.                                 console.log(res.status)
  68.                             })
  69.                         },
  70.                         // 节流函数
  71.                         throttle(method, context) {
  72.                             clearTimeout(method.tId);
  73.                             method.tId = setTimeout(function() {
  74.                                 method.call(context);
  75.                             },
  76.                             300);
  77.                         }
  78.                     }
  79.                 })
  80.             }
  81.         </script>
  82.         <style type="text/css">
  83.             .gray { background: gray }
  84.         </style>
  85.     </head>
  86.     
  87.     <body>
  88.         <!-- 百度下拉接口 -->
  89.         <div id="box">
  90.             <input type="text" v-model="tt" name="" @keyup="get($event)" @keydown.down="changeDown()"
  91.             @keydown.up="changeUp()">
  92.             <ul>
  93.                 <li v-for="(item, index) in myData" :class="{gray:index===now}">
  94.                     {{item}}
  95.                 </li>
  96.             </ul>
  97.         </div>
  98.     </body>
  99.  
  100. </html>

来源: http://www.phperz.com/article/17/0824/338672.html


与本文相关文章

  1. vue实现一个移动端屏蔽滑动的遮罩层实例
  2. vue.js加载新的内容(实例代码)
  3. 百度外卖出书啦 ——《 Vue 移动开发实战技巧》
  4. Vue2.0 笔记 --Vue 实例
  5. vue时间格式化实例代码
  6. laravel5.3 vue 实现收藏夹功能
  7. 详解 vue 移动端 下拉刷新
  8. Vue组件实例间的直接访问
暂无,快来抢沙发吧！
更多





黑ICP备17005318号-1