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类库的顶层对象名用户体验分析
Oct 24 Javascript
Javascript自定义排序 node运行 实例
Jun 05 Javascript
javascript获取网页宽高方法汇总
Jul 19 Javascript
jQuery+HTML5加入购物车代码分享
Oct 29 Javascript
jQuery+Ajax实现无刷新分页
Oct 30 Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
May 11 Javascript
angularjs下拉框空白的解决办法
Jun 20 Javascript
angular2中Http请求原理与用法详解
Jan 11 Javascript
浅谈JavaScript面向对象--继承
Mar 20 Javascript
javascript实现弹出层效果
Dec 10 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
Jun 29 Javascript
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
第十一节 重载 [11]
2006/10/09 PHP
php网上商城购物车设计代码分享
2012/02/15 PHP
PHP的password_hash()使用实例
2014/03/17 PHP
PHP使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
php经典算法集锦
2015/11/14 PHP
一个加载js文件的小脚本
2007/06/28 Javascript
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
JS常用函数使用指南
2014/11/23 Javascript
jQuery中scrollLeft()方法用法实例
2015/01/16 Javascript
js实现简易的单数字随机抽奖(0-9)
2020/03/19 Javascript
JavaScript toUpperCase()方法使用详解
2016/08/26 Javascript
Javascript数组循环遍历之forEach详解
2016/11/07 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
2017/11/09 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
layui实现数据表格点击搜索功能
2020/03/26 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
2019/12/04 Javascript
es6 super关键字的理解与应用实例分析
2020/02/15 Javascript
Vue 3.0中jsx语法的使用
2020/11/13 Javascript
Python break语句详解
2014/03/11 Python
python实现爬虫下载美女图片
2015/07/14 Python
50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)
2019/11/20 Python
Python基于进程池实现多进程过程解析
2020/04/30 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
AVIS安飞士奥地利租车官网:提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
亚马逊巴西站:Amazon.com.br
2019/09/22 全球购物
小学生读书活动总结
2014/06/30 职场文书
党建工作汇报材料
2014/12/24 职场文书
安全教育日主题班会
2015/08/13 职场文书
员工给公司的建议书
2019/06/24 职场文书
Python获取百度热搜的完整代码
2021/04/07 Python
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers