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 相关文章推荐
Prototype中dom对象方法汇总
Sep 17 Javascript
javascript Array.sort() 跨浏览器下需要考虑的问题
Dec 07 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
Aug 06 Javascript
jQuery UI库中dialog对话框功能使用全解析
Apr 23 Javascript
JavaScript SHA512加密算法详细代码
Oct 06 Javascript
Vue导出页面为PDF格式的实现思路
Jul 31 Javascript
快速解决处理后台返回json数据格式的问题
Aug 07 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
Dec 14 Javascript
7个好用的JavaScript技巧分享(译)
May 07 Javascript
layer弹出层自定义提交取消按钮的例子
Sep 10 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
Sep 28 Javascript
原生JS实现pc端轮播图效果
Dec 21 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 缓存实现代码及详细注释
2010/05/16 PHP
PHP实例分享判断客户端是否使用代理服务器及其匿名级别
2014/06/04 PHP
nginx+thinkphp下解决不支持pathinfo模式
2015/07/01 PHP
jQuery ul标签下拉菜单演示代码
2010/12/11 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
2011/05/25 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
10个基于浏览器的JavaScript调试工具分享
2013/02/07 Javascript
js鼠标滑过图片震动特效的方法
2015/02/17 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
2018/04/07 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
javascript判断一个变量是数组还是对象
2019/04/10 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
JavaScript实现点击切换功能
2021/01/27 Javascript
利用python实现数据分析
2017/01/11 Python
详解K-means算法在Python中的实现
2017/12/05 Python
python验证码识别实例代码
2018/02/03 Python
深入了解和应用Python 装饰器 @decorator
2019/04/02 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
django如何实现视图重定向
2019/07/24 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
Keras中 ImageDataGenerator函数的参数用法
2020/07/03 Python
python实现文件分片上传的接口自动化
2020/11/19 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
全球酒店预订网站:Hotels.com
2016/08/10 全球购物
wedgwood加拿大官网:1759年成立的英国国宝级陶瓷餐具品牌
2018/07/17 全球购物
餐厅经理岗位职责范本
2014/02/17 职场文书
商学院大学生求职的自我评价
2014/03/12 职场文书
小学生家长寄语
2014/04/02 职场文书
2014年依法行政工作总结
2014/11/19 职场文书
乡镇科协工作总结2015
2015/05/19 职场文书
母亲去世追悼词
2015/06/23 职场文书
用JS实现飞机大战小游戏
2021/06/09 Javascript
Mysql数据库值的添加、修改、删除及清空操作实例
2021/06/20 MySQL
python中Matplotlib绘制直线的实例代码
2021/07/04 Python
Python办公自动化解决world文件批量转换
2021/09/15 Python