一、初始化vue-cli项目

vue init webpack my-project

因为要使用sass所以得安装node-sass

这里可能会有版本过高现象，如果运行报错就卸载安装对应版本

1. sass-loader依赖于node-sass,所以要安装node-sasscnpm install node-sass --save-dev       //安装node-sass
cnpm install sass-loader --save-dev         //安装依赖包sass-loader
cnpm install style-loader --save-dev        //安装style-loader2. 在build文件夹下的webpack.base.conf.js的module下 rules里面添加配置{test: /\.sass$/,loaders: ['style', 'css', 'sass']
},

二、实现界面样式

html部分，界面样式是模仿百度搜索框做的效果

<template><div class="search-from"><div style="text-align: center;">{{ msg }}</div><div class="search"><inputtype="text"placeholder="请输入搜索内容"class="s-input"v-model="keyword"v-on:focus="focus()"v-on:blur="blur()"@keyup="getData($event)"@keydown.down.prevent="selectDown"@keydown.up.prevent="selectUp"/><button class="s-btn">搜索</button></div><ul class="s-ul" v-show="ifshow"><listyle="color: #ccc; font-size:14px; text-align: center;"v-show="myData.length == 0">暂时没有数据啦.....</li><liv-for="(item, index) in myData":key="index":class="{ ifacitve: now == index }"><span>{{ item }}</span></li></ul></div>
</template>

CSS部分

<style lang="scss" scoped>
* {margin: 0;padding: 0;
}
.search-from {margin: 0 auto;width: 500px;display: flex;flex-direction: column;.search {margin: 0 auto;margin-top: 15px;width: 500px;display: flex;.s-input {width: 450px;height: 30px;padding-left: 12px;border-radius: 5px 0px 0px 5px;border: 2px solid #ccc;border-right-style: none;}.s-input:focus {border-radius: 5px 0px 0px 0px;outline: 0;border: 2px solid #00a0e9;border-right-style: none;border-bottom-color: rgb(238, 235, 235);}.s-btn {width: 50px;height: 34px;color: #fff;background-color: #00a0e9;border: none;border-radius: 0px 5px 5px 0px;}.s-btn:hover {background-color: #002be9;}}.s-ul {width: 450px;height: 100%;border-radius: 0px 0px 5px 5px;border: 2px solid #00a0e9;border-top-style: none;li {list-style: none;padding-left: 10px;font-size: 14px;padding-top: 5px;padding-bottom: 5px;}}.ifacitve {color: #00a0e9;}
}
</style>

三、JavaScript部分

1.首先是下拉框的下拉实现，获取焦点和失去焦点方法

这里遇到一个问题，失去焦点或者清空时，mydata里面数据没有清空，会导致再次获取焦点时下拉框内还会有上次保存的搜索数据，所以失去焦点时我们清空内容。

// 输入框获取焦点时focus() {this.ifshow = true;this.getData();},
// 输入框失去焦点时blur() {this.ifshow = false;this.myData = [];},

2.获取下拉框数据方法

这里要安装插件vue-resource，好使用this.$http.jsonp()方法

npm install vue-resource --save

这里使用了百度的搜索接口相关api。

遇到的问题：

1.因为要监听键盘事件实时进行刷新，获取焦点就要调用此方法，但是获取焦点时并不会将event对象传入，然后就报错"event" undefined，所以我们先判断是否有event传入，有的时候在进行监听。

2.使用了sessionStorage本地缓存在进行请求前判断本地是否有缓存，我们将关键字作为键，myData作为值储存。

进行缓存：

sessionStorage.setItem(this.keyword, JSON.stringify(this.myData));

进行判断

if (sessionStorage.getItem(this.keyword) != null) {//sessionStorage 键值是否为空进行判断// console.log(JSON.parse(sessionStorage.getItem(this.keyword)));this.myData = JSON.parse(sessionStorage.getItem(this.keyword));}

如果没有相应的本地缓存再丛服务器发起请求。

3.方向键选择下拉框搜索词条

将选中的li进行高亮显示

我定义了一个class

 .ifacitve {color: #00a0e9;}

html

     <liv-for="(item, index) in myData":key="index":class="{ ifacitve: now == index }"><span>{{ item }}</span></li>

先判断输入框内的值是否为空，如果为空就不进行操作，然后通过now来判断是否和当前li的index相等，如果相等就表示此li被选中了，然后判断now的最大值不能超过mydata的最大长度，最小值不能小于0，如果小于就进行修正。

// 向下方向键selectDown() {if (this.keyword == "") return;this.now++;// 判断是否到达了最后一个 如果是则返回第一个if (this.now == this.myData.length) this.now = 0;this.keyword = this.myData[this.now];},
// 向上方向键selectUp() {if (this.keyword == "") return;this.now--;// 判断是否到达了第一个如果是就返回最后一个if (this.now == this.myData.length || this.now <= -1)this.now = this.myData.length - 1;this.keyword = this.myData[this.now];}

最后贴上全部的函数代码

    // 获取搜索词条getData(event) {if (this.keyword == "") {this.myData = [];return;}// 判断event 是否传入 是否按下了上下方向键 如果按了就返回 不执行操作if (event != undefined) {if (event.keyCode == 38 || event.keyCode == 40) return;}// //按下确认件跳转到百度搜索界面// if (event.keyCode == 13) {//   window.open("https://www.baidu.com/s?wd=" + this.keyword);//   this.keyword = "";// }// 判断本地缓存是否有搜索关键字的缓存 有就使用没有就发送请求if (sessionStorage.getItem(this.keyword) != null) {//sessionStorage 键值是否为空进行判断// console.log(JSON.parse(sessionStorage.getItem(this.keyword)));this.myData = JSON.parse(sessionStorage.getItem(this.keyword));} else {this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?", {params: {wd: this.keyword},jsonp: "cb"}).then(res => {// console.log("---------res:%o", res);this.myData = res.body.s;sessionStorage.setItem(this.keyword, JSON.stringify(this.myData));// console.log("*********myData:%o", this.myData);});}},

vue使用百度搜索接口实现下拉搜索效果相关推荐

下拉搜索词api接口、淘宝搜索下拉框选词api，淘宝下拉词接口，淘宝搜索的下拉词推荐接口、关键词推荐api
一.下拉搜索框选词api介绍淘宝搜索下拉框选词是通过淘宝.天猫.手机润宝搜索下拉框查询淘宝搜索指数高.流量高.转化率高的关键词,并获取各关键词对应的在线相关宝贝数量及其推荐属性词.对于查询到的这些关 ...
Angular 下拉搜索框实现
今天有个需求要写一个下拉搜索框,本来是下拉框的,由于内容太多,所以添加一个查找功能.根据博客进行改写的.参考了他的基本框架进行实现. 效果图: 输入框右边的白色箭头图片下载地址 <td>x ...
jqgrid表格下拉搜索多选框优化—使用select下拉多选插件
jqgrid表格插件应该是表格插件中最强大吧,最近项目需要使用jqgrid但又要根据项目需求进行一些私人订制,还好jqgrid的源码写清晰易懂. jqgrid有个下拉搜索的功能,我们先看下官网的展示, ...
html搜索框如何加下拉框,js实现带搜索功能的下拉框
本文实例为大家分享了js实现带搜索功能的下拉框,供大家参考,具体内容如下 1.介绍在实现下拉框的时候,如果用select+option可以在满足pc端的需求,但如果需应用到手机端,由于select的 ...
免费资源下载：暗色色系的超棒搜索框和下拉菜单UI欣赏
为什么80%的码农都做不了架构师?>>> 日期:2012-7-5 来源:GBin1.com 在今天的免费素材下载中,我们推荐来自法国的UI设计师Alexandra Nuad的 ...
WPS表格excel实现下拉搜索（简单几步，轻松搞定）
如图: 详细步骤: 1.准备下拉搜索的字典: 2.设置下拉,选中任意一个格子,如图:数据-有效性 3.如图,这只为[序列],并选择[来源] 4.然后就可以下拉搜索了然后通过钉钉之类的共享文档,就实现 ...
uniapp实现下拉搜索选择框，app，h5可用
在通过uniapp做app开发的时候,有场景需要用到下拉选择框,但是使用的uview框架里的底部弹出的选择项形式产品又不满意...于是在uniapp插件市场上搜索了一番,最终发现了一款还可以的,主要 ...
vue 停止页面滚动_Vue禁止h5页面iOS浏览器下拉bounce效果
介绍 vue-disbounce是一款基于Vue.js的自定义组件,可以有效避免触发h5页面在ios浏览器内置的下拉bounce效果. 组件 :style="{'background-col ...
ios android 同步的备忘录,iOS 备忘录如何共享给好友编辑 / Android 如何实现下拉搜索 | 有轻功 #012...
「有轻功」是 AppSo 新栏目它是「有用功」的迷你瘦身版每天 10 秒钟教你 1 个即学即用的手机技巧微信号 appsolution 后台回复「有轻功」获取该栏目的所有文章这是第 12 ...

vue使用百度搜索接口实现下拉搜索效果