Vue实现百度下拉提示搜索

简介: 网上大神已经做过这个功能https://github.com/lavyun/vue-demo-search 这自己仅实现搜索功能

一、前期准备


网上大神已经做过这个功能https://github.com/lavyun/vue-demo-search    这自己仅实现搜索功能


为了使用百度实现搜索功能,首先搞清楚下拉数据和搜索功能的数据接口

01:提示数据获取地址


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


13.png

提示数据获取地址.png


然后简化一下:


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


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


14.png

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


02:搜索功能实现地址


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


15.png

搜索地址.png


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


16.png

简化地址.png


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


17.png

测试.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遍历提示数据


18.png

提示数据.png


然后selectDown和selectUp实现上下选中数据,当按下回车键时,实现搜索

完整代码:https://github.com/yanqiangmiffy/baidu-search


三、实现效果


20.png

效果.gif


相关文章
|
6月前
|
JavaScript
vue实现下拉列表远程搜索示例(根据关键词模糊搜索)
vue实现下拉列表远程搜索示例(根据关键词模糊搜索)
|
1月前
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
53 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
3月前
|
资源调度 JavaScript 定位技术
Vue2使用百度地图展示或搜索地点(vue-baidu-map)
本文介绍了如何在 Vue 项目中使用 `vue-baidu-map` 插件,包括安装、全局注册及具体应用。首先通过 `yarn add vue-baidu-map` 安装插件,并在 `main.js` 中全局注册。然后展示了如何在地图上显示特定位置的标记,以及如何搜索地点并获取其经纬度和详细地址信息。代码示例提供了详细的实现方法和样式调整。如需使用,请确保已获取百度地图 API 的密钥。
510 1
|
4月前
|
JavaScript 定位技术
vue-baidu-map 绘制行政区划的轮廓,添加行政区划名称(含给覆盖物添加点击事件)——vue 百度地图开发
vue-baidu-map 绘制行政区划的轮廓,添加行政区划名称(含给覆盖物添加点击事件)——vue 百度地图开发
253 1
|
4月前
|
JavaScript
vue 页面向下滚动到指定位置时,顶部显示悬浮搜索框
vue 页面向下滚动到指定位置时,顶部显示悬浮搜索框
120 1
|
4月前
|
JavaScript
vue3 中借助 tsx 使用 JSX (以实现字体下拉选择为例)
vue3 中借助 tsx 使用 JSX (以实现字体下拉选择为例)
115 0
|
4月前
|
JavaScript 前端开发 定位技术
vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)
vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)
247 0
|
4月前
|
JavaScript 定位技术
vue 百度地图开发【教程】3. 自定义百度地图主题
vue 百度地图开发【教程】3. 自定义百度地图主题
164 0
|
4月前
|
JavaScript 定位技术
vue 百度地图开发【教程】1. 绘制百度地图(不使用 vue-baidu-map,解决 BMap is undefined)
vue 百度地图开发【教程】1. 绘制百度地图(不使用 vue-baidu-map,解决 BMap is undefined)
403 0
|
5月前
|
机器学习/深度学习 搜索推荐
一招告别百度广告烦恼,同时效率提高100倍的几个常用搜索技巧!
一招告别百度广告烦恼,同时效率提高100倍的几个常用搜索技巧!

热门文章

最新文章