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之旅 对象的原型链之由来
Aug 25 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
Dec 11 Javascript
Redis基本知识、安装、部署、配置笔记
Mar 05 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
Aug 05 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 Javascript
AngularJS通过$sce输出html的方法
Sep 22 Javascript
JS仿京东移动端手指拨动切换轮播图效果
Apr 10 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
vue中注册自定义的全局js方法
Nov 15 Javascript
JS中准确判断变量类型的方法
Jun 01 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 jQuery
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
非常好的php目录导航文件代码
2006/10/09 PHP
php安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
非常精妙的PHP递归调用与静态变量使用
2012/12/16 PHP
PHP中加速、缓存扩展的区别和作用详解(eAccelerator、memcached、xcache、APC )
2016/07/09 PHP
yepnope.js 异步加载资源文件
2011/09/08 Javascript
学习JavaScript的最佳方法分享
2011/10/21 Javascript
浅谈JavaScript中的作用域和闭包问题
2015/07/07 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
2016/05/12 Javascript
漫谈JS引擎的运行机制 你应该知道什么
2016/06/15 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
javascript操作cookie
2017/01/17 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
2017/03/08 Javascript
详解nodejs的express如何自动生成项目框架
2017/07/12 NodeJs
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
2019/03/12 Javascript
JavaScript工具库之Lodash详解
2019/06/15 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
2020/11/05 Javascript
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
Python编码时应该注意的几个情况
2013/03/04 Python
python基础while循环及if判断的实例讲解
2017/08/25 Python
花卉与景观设计系大学生求职信
2013/10/01 职场文书
教师应聘个人求职信
2013/12/10 职场文书
银行职业规划书范文
2013/12/28 职场文书
村党支部公开承诺书
2014/05/29 职场文书
五年级学生评语大全
2014/12/26 职场文书
运动会100米加油稿
2015/07/21 职场文书
2016中秋节广告语
2016/01/28 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
vue实现简单数据双向绑定
2021/04/28 Vue.js
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP
OpenCV-Python实现轮廓的特征值
2021/06/09 Python
Python中的 No Module named ***问题及解决
2022/07/23 Python