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

  • 更新时间:2022-06-23 14:55:54
  • 编辑:乔思佳
给寻找编程代码教程的朋友们精选了Vue相关的编程文章,网友瞿浩漫根据主题投稿了本篇教程内容,涉及到Vue百度下拉提示搜索、Vue下拉提示搜索、Vue下拉提示、Vue提示搜索相关内容,已被498网友关注,相关难点技巧可以阅读下方的电子资料。

参考资料

正文内容

一、前期准备

网上大神已经做过这个功能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实现百度下拉提示搜索功能

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

Vue相关教程

  • 详解在vue-cli中使用路由

    给大家整理了关于vue的教程,本篇文章主要介绍了详解在vue-cli中使用路由,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    发布时间:2022-06-23

  • Vue组件插槽的使用以及调用组件内的方法分析

    在本篇文章里我们给大家分享了Vue组件插槽的使用以及调用组件内的方法相关知识点,有需要的朋友们参考下。

    发布时间:2021-05-18

  • vue axios中文文档知识点概述

    本篇文章主要介绍了详解axios中文文档,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    发布时间:2019-11-12

  • vue-cli开发时ajax跨域的方法

    下面小编就为大家分享一篇vue-cli开发时,关于ajax跨域的解决方法(推荐),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

    发布时间:2019-11-18

  • Vue动态创建注册component的实例详解

    这篇文章主要给大家介绍了关于Vue动态创建注册component的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧

    发布时间:2019-09-15

  • 如何用vue组件实现用户无限添加自定义填写表单

    今天小编就为大家分享一篇vue组件开发之用户无限添加自定义填写表单的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

    发布时间:2020-02-16

  • 分享vue使用Element组件时v-for循环里的表单项验证解决方案

    这篇文章主要介绍了vue使用Element组件时v-for循环里的表单项验证方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    发布时间:2020-03-01

  • vue组件发布到npm的方法

    给大家讲解一下vue组件发布到npm简单方法和步骤过程,需要的朋友一起学习参考一下。

    发布时间:2020-02-19

  • vue实现双向绑定和依赖收集遇到的问题及解决方法

    这篇文章主要介绍了vue的双向绑定和依赖收集,主要是通过Object.defineProperty() 实现双向绑定,具体思路代码大家跟随小编一起看看吧

    发布时间:2020-04-16

用户留言