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 相关文章推荐
经常用的图片在容器中的水平垂直居中实例
Jun 10 Javascript
基于jquery的拖动布局插件
Nov 25 Javascript
JQuery.closest(),parent(),parents()寻找父结点
Feb 17 Javascript
ie支持function.bind()方法实现代码
Dec 27 Javascript
jQuery中:focus选择器用法实例
Dec 30 Javascript
BootStrap中Datepicker控件带中文的js文件
Aug 10 Javascript
AngularJS实现表单验证功能
Jan 09 Javascript
微信小程序商品到详情的实现
Jun 27 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
Jan 24 Javascript
vue mounted组件的使用
Jun 18 Javascript
Vue2.2.0+新特性整理及注意事项
Aug 22 Javascript
layui-table获得当前行的上/下一行数据的例子
Sep 24 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
PHP4实际应用经验篇(4)
2006/10/09 PHP
php md5下16位和32位的实现代码
2008/04/09 PHP
Ubuntu中搭建Nginx、PHP环境最简单的方法
2015/03/05 PHP
php视频拍照上传头像功能实现代码分享
2015/10/08 PHP
PHP模拟post提交数据方法汇总
2016/02/16 PHP
什么是PHP文件?如何打开PHP文件?
2017/06/27 PHP
JavaSript中变量的作用域闭包的深入理解
2014/05/12 Javascript
JavaScript中string转换成number介绍
2014/12/31 Javascript
JavaScript字符串常用类使用方法汇总
2015/04/14 Javascript
底部悬浮通栏可以关闭广告位的实现方法
2016/06/01 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
详解Vue中watch对象内属性的方法
2019/02/01 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
Vue父组件向子组件传值以及data和props的区别详解
2020/03/02 Javascript
javascript中正则表达式语法详解
2020/08/07 Javascript
vue-cli 关闭热更新操作
2020/09/18 Javascript
Python标准库内置函数complex介绍
2014/11/25 Python
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
关于Python中异常(Exception)的汇总
2017/01/18 Python
python实现的多线程端口扫描功能示例
2017/01/21 Python
详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数
2018/04/18 Python
python实现转圈打印矩阵
2019/03/02 Python
python爬虫的一个常见简单js反爬详解
2019/07/09 Python
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
美国美妆网站:B-Glowing
2016/10/12 全球购物
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
乌克兰在线药房:Аптека24
2019/10/30 全球购物
学生会主席竞聘书
2014/03/31 职场文书
2015年敬老月活动总结
2015/03/27 职场文书
童年读书笔记
2015/06/26 职场文书
教你用eclipse连接mysql数据库
2021/04/22 MySQL
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers
python实现双链表
2022/05/25 Python