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

发布时间：2020-12-17 02:54:56 所属栏目：百科来源：网络整理

导读：一、前期准备网上大神已经做过这个功能https://github.com/lavyun/vue-demo-search 这自己仅实现搜索功能为了使用百度实现搜索功能，首先搞清楚下拉数据和搜索功能的数据接口 01、提示数据获取地址打开百度官网打开开发者调试工具，选中network一项，然后

一、前期准备

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

01、提示数据获取地址

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

然后简化一下：

代码如下:

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

02：搜索功能实现地址

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

搜索地址简化前后对比，是不是看起来很舒服了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

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

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

三、实现效果

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!