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


Posted in Javascript onJune 21, 2017

一、前期准备

网上大神已经做过这个功能https://github.com/lavyun/vue-demo-search 这自己仅实现搜索功能
为了使用百度实现搜索功能,首先搞清楚下拉数据和搜索功能的数据接口

01、提示数据获取地址

打开百度官网打开开发者调试工具,选中network一项,然后我们在搜索框输入'a',将会network发送的请求,这个就是提示数据的数据获取地址

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

提示数据获取地址.png

然后简化一下:

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jQuery110208352732182923484_1497924041050&_=1497924041057#

其中“wd=”后接搜索的关键字,“cb=”后接回调函数

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

输入a时,请求的提示数据

02:搜索功能实现地址

在输入框中输入“a”之后,点击搜索按钮之后,地址栏中地址就是实现搜索功能的地址

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

搜索地址.png

搜索地址简化前后对比,是不是看起来很舒服了O(∩_∩)O

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

简化地址.png

我们使用简化之后的地址,搜索关键字“s‘'测试一下

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

测试.png

二、代码实现

js代码

new Vue({
    el:'#app',
    data:{
      myData:[],
      keyword:'',
      now:-1
    },
    methods:{
      get:function (event) {
        if(event.keyCode==38||event.keyCode==40)return;
        if(event.keyCode==13){
          window.open('https://www.baidu.com/s?wd='+this.keyword);
          this.keyword=''
        }
        this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
          wd:this.keyword
        },{
          jsonp:'cb'
        }).then(function (res) {
          this.myData=res.data.s;
        },function () {

        });
      },
      selectDown:function () {
        this.now++;
        if(this.now==this.myData.length)this.now=-1;
        this.keyword=this.myData[this.now];
      },
      selectUp:function () {
        this.now--;
        if(this.now==-2)this.now=this.myData.length-1;
        this.keyword=this.myData[this.now];
      }
    }
  })

html代码

<div class="container search-container" id="app">
  <h1 class="title" >baidu-search</h1>
  <input type="text" class="form-control" placeholder="请输入想要搜索关键字" v-model="keyword" @keyup="get($event)" @keydown.down.prevent="selectDown"
  @keydown.up.prevent="selectUp">
  <ul>
    <li class="text-center" v-for="(value,index) in myData"><span class="text-success textprimary" :class="{gray:index==now}">{{value}}</span></li>
  </ul>
  <p ><h2 v-show="myData.length==0" class="text-warning text-center">(*^__^*)暂时没有数据</h2></p>
</div>

get方法实现获取下拉数据和搜索功能,输入keyword之后,调用get方法使用jsonp获取提示数据,然后赋值给myData,然后使用v-for遍历提示数据

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

提示数据.png

然后selectDown和selectUp实现上下选中数据,当按下回车键时,实现搜索
完整代码:https://github.com/yanqiangmiffy/baidu-search

三、实现效果

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

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

Javascript 相关文章推荐
javascript两段代码,两个小技巧
Feb 04 Javascript
js类型检查实现代码
Oct 29 Javascript
eval的两组性能测试数据
Aug 17 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 Javascript
JS使用eval解析JSON的注意事项分析
Nov 14 Javascript
jQuery代码优化方法总结
Jan 29 jQuery
Vue-cropper 图片裁剪的基本原理及思路讲解
Apr 17 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
Sep 30 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
Oct 11 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 Javascript
vue-video-player 断点续播的实现
Feb 01 Vue.js
vue2.0中click点击当前li实现动态切换class
Jun 21 #Javascript
jQuery实现可拖动进度条实例代码
Jun 21 #jQuery
详解Vue整合axios的实例代码
Jun 21 #Javascript
详解在vue-cli项目中安装node-sass
Jun 21 #Javascript
详解vue-cli中配置sass
Jun 21 #Javascript
详解如何在vue中使用sass
Jun 21 #Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
Jun 21 #Javascript
You might like
一个多文件上传的例子(原创)
2006/10/09 PHP
PHP简单系统查询模块代码打包下载
2008/06/07 PHP
php完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
浅析PHP中Collection 类的设计
2013/06/21 PHP
浅析get与post的一些特殊情况
2014/07/28 PHP
PHP实现上传多图即时显示与即时删除的方法
2017/05/09 PHP
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
javascript 精粹笔记
2010/05/09 Javascript
新鲜出炉的js tips提示效果
2011/04/03 Javascript
javascript插入样式实现代码
2012/02/22 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
防止文件缓存的js代码
2013/01/10 Javascript
jQuery 回车事件enter使用示例
2014/02/18 Javascript
基于js实现的限制文本框只可以输入数字
2016/12/05 Javascript
根据Bootstrap Paginator改写的js分页插件
2016/12/25 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
详解基于 Node.js 的轻量级云函数功能实现
2019/07/08 Javascript
JS实现排行榜文字向上滚动轮播效果
2019/11/26 Javascript
javascript实现前端成语点击验证
2020/06/24 Javascript
从零学python系列之新版本导入httplib模块报ImportError解决方案
2014/05/23 Python
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
python去除所有html标签的方法
2015/05/05 Python
python删除过期文件的方法
2015/05/29 Python
python编程开发之textwrap文本样式处理技巧
2015/11/13 Python
python实现周期方波信号频谱图
2018/07/21 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
python飞机大战 pygame游戏创建快速入门详解
2019/12/17 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
美赞臣新加坡官方旗舰店:Enfagrow新加坡
2019/05/15 全球购物
初中班主任经验交流材料
2014/05/16 职场文书
2015年学校禁毒工作总结
2015/05/27 职场文书