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


Posted in Javascript onJune 14, 2017

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

效果图:

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

这个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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
Nov 14 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
Jan 17 Javascript
jquery 单引号和双引号的区别及使用注意
Jul 31 Javascript
jquery防止重复执行动画避免页面混乱
Apr 22 Javascript
jquery+json实现分页效果
Mar 07 Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
Feb 08 Javascript
angularjs实现table增加tr的方法
Feb 27 Javascript
axios+Vue实现上传文件显示进度功能
Apr 14 Javascript
微信小程序实现watch监听
Jun 04 Javascript
JS查找数组中重复元素的方法详解
Jun 14 #Javascript
JS设置手机验证码60s等待实现代码
Jun 14 #Javascript
jQuery ajax动态生成table功能示例
Jun 14 #jQuery
使用requirejs模块化开发多页面一个入口js的使用方式
Jun 14 #Javascript
vue-loader教程介绍
Jun 14 #Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 #Javascript
Vue2.0 从零开始_环境搭建操作步骤
Jun 14 #Javascript
You might like
PHP与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法
2010/12/29 PHP
php _autoload自动加载类与机制分析
2012/02/10 PHP
php CI框架插入一条或多条sql记录示例
2014/07/29 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
javascript 运算数的求值顺序
2011/08/23 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
2014/06/26 Javascript
javascript实现画不相交的圆
2015/04/07 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
纯JS代码实现气泡效果
2016/05/04 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
小程序视频列表中视频的播放与停止的示例代码
2018/07/20 Javascript
BootStrap table实现表格行拖拽效果
2018/12/01 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
2019/02/21 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
Ant Design Pro 之 ProTable使用操作
2020/10/31 Javascript
Python中使用wxPython开发的一个简易笔记本程序实例
2015/02/08 Python
flask-socketio实现WebSocket的方法
2018/07/31 Python
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
Shell编程面试题
2012/05/30 面试题
活动志愿者自荐信
2014/01/27 职场文书
迟到早退检讨书
2014/02/10 职场文书
技术比武方案
2014/05/19 职场文书
杭州西湖英语导游词
2015/02/03 职场文书
三好学生个人总结
2015/02/15 职场文书
入党积极分子个人总结
2015/03/02 职场文书
爱心捐书倡议书
2015/04/27 职场文书
领导干部失职检讨书
2015/05/05 职场文书
《青山不老》教学反思
2016/02/22 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书
导游词之桂林山水
2019/09/20 职场文书
如何使用php生成zip压缩包
2021/04/21 PHP
golang switch语句的灵活写法介绍
2021/05/06 Golang