Vue实现百度下拉提示搜索一、前期准备二、代码实现三、实现效果
时间:2022-05-08
本文章向大家介绍Vue实现百度下拉提示搜索一、前期准备二、代码实现三、实现效果,主要内容包括一、前期准备、二、代码实现、三、实现效果、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
一、前期准备
网上大神已经做过这个功能https://github.com/lavyun/vue-demo-search 这自己仅实现搜索功能 为了使用百度实现搜索功能,首先搞清楚下拉数据和搜索功能的数据接口 01:提示数据获取地址 打开百度官网打开开发者调试工具,选中network一项,然后我们在搜索框输入'a',将会network发送的请求,这个就是提示数据的数据获取地址
提示数据获取地址.png
然后简化一下:
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jQuery110208352732182923484_1497924041050&_=1497924041057#
其中“wd=”后接搜索的关键字,“cb=”后接回调函数
输入a时,请求的提示数据
02:搜索功能实现地址 在输入框中输入“a”之后,点击搜索按钮之后,地址栏中地址就是实现搜索功能的地址
搜索地址.png
搜索地址简化前后对比,是不是看起来很舒服了O(∩_∩)O
简化地址.png
我们使用简化之后的地址,搜索关键字“s‘’测试一下
测试.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遍历提示数据
提示数据.png
然后selectDown和selectUp实现上下选中数据,当按下回车键时,实现搜索 完整代码:https://github.com/yanqiangmiffy/baidu-search
三、实现效果
效果.gif
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Spring BindingResult获取不到结果可能的原因之一 参数顺序 没有紧挨着校验参数
- 残差收缩网络:一种深度学习故障诊断算法
- Solr学习笔记 - 关于近实时搜索
- Solr学习笔记 - 关于timeAllowed
- Solr学习笔记 - 关于cache
- PG密码安全
- 如何利用Terraform工具编排管理TcaplusDB
- mysql隐式转换造成的查询结果不正确案例
- 【TBase开源版测评】体验安装
- 【Golang】go get遇到git fetch-pack: expected shallow list
- 聊聊dubbo-go的DefaultHealthChecker
- Java后端面试学习知识总结
- Spring框架源码脉络分析(一):IoC与容器、Bean和BeanDefinition
- Spring-Data-Redis 2.X以上版本使用心得和一些坑
- Java后端面试学习知识总结——数据库:MySQL