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

一、前期准备

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

01、提示数据获取地址

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

提示数据获取地址.png

然后简化一下:

代码如下:
4041050&_=1497924041057#

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

提示数据

02:搜索功能实现地址

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

搜索地址.png

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

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

二、代码实现

js代码

}); },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代码

baidu-search@H_404_67@ 搜索关键字" v-model="keyword" @keyup="get($event)" @keydown.down.prevent="selectDown" @keydown.up.prevent="selectUp">
  • 301_69@

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

提示数据.png

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

三、实现效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

相关文章

问题现象 elmentui的el-tree数据加载问题,导致第一次加载选中当前节点和高亮当前节点没有生效。 解决方...
因为刚打开文件,vscode默认是预览状态,如果编辑过之后,就不会有这个问题。 可以通过双击将预览状态接...
前言 上篇文章我们介绍了国产SM4加密算法的后端java实现方案。没有看过的小伙伴可以看一下这篇文章。 h...
在项目中引入动态路由时报错 写法: 报错: Module build failed (from ./node_modules/_eslint-loader@2...
问题产生 在使用babel编译es6时,遇到报错Uncaught ReferenceError: regeneratorRuntime is not define...
父组件的编写 <a:orgCode=orgCode ></a> 在data里面增加...