搜索框功能实现

在这里插入图片描述

搜索框功能实现

在开发搜索框过程中需要实现两个小功能，技术栈是nuxt.js  功能描述如下

功能1：当鼠标聚焦的时候搜索框下方出现热门推荐，如下图所示

在这里插入图片描述

功能2：当输入搜索内容的时候，热门推荐消失，出现搜索结果，也就是功能1和功能2为互斥性

在这里插入图片描述

HTML代码

<el-col :span= "12" class="center"><div class="wrapper"><el-inputv-model="search"placeholder="搜索商家或地点"@input="input"@focus="focus"@blur="blur"></el-input><button class="el-button el-button--primary"><i class="el-icon-search" /></button><dl v-if="isHotPlace" class="hotPlace"><dt>热门搜索</dt><dd v-for="(item, index) in hotPlace" :key="index" @click="select">{{item}}</dd></dl><dl v-if="isSearchList" class="searchList"><dd v-for="(item, index) in searchList" :key="index" @click="selectList">{{item}}</dd></dl></div>
<el-col>

css样式代码

 .wrapper {margin-top: 16px;border: 1px solid #13D1BE;border-radius: 4px;width: 552px;box-sizing: border-box;position: relative;white-space: nowrap;.el-input {width: 462px;}input {border: none;border-top-right-radius: 0;border-bottom-right-radius: 0;}.el-button {width: 88px;border: none;background: #13D1BE;font-size: 16px;border-top-left-radius: 0;border-bottom-left-radius: 0;vertical-align: -1px;i {font-weight: bold;}}.hotPlace,.searchList {position: absolute;top: 41px;left: 0;background: #fff;padding: 10px;font-size: 12px;width: 462px;box-sizing: border-box;border: 1px solid #E5E5E5;border-top: none;z-index: 999;box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .1);border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;dt {color: #999;font-weight: bold;}dd {display: inline-block;color: #666;margin-right: 10px;margin-bottom: 3px;margin-top: 5px;cursor: pointer;&:hover {background: #F8F8F8;color: #31BBAC;}}&.searchList {padding: 0;margin: 0;dd {margin: 0;padding: 3px 10px;display: block;line-height: 1.6;}}}}.suggest {width: 552px;overflow: hidden;padding-left: 16px;line-height: 1;margin-top: 8px;height: 14px;a {color: #999;margin-right: 10px;margin-bottom: 3px;display: inline-block;font-size: 12px;&:hover {color: #31BBAC;}}}.nav {list-style: none;display: flex;margin-top: 25px;li {font-weight: 700;font-size: 16px;margin: 0 20px;cursor: pointer;position: relative;a {color: #222;&:hover {color: #f04d4e;}&.takeout:hover {color: #fbc700;}&.apartment:hover {color: #FDC411;}&.business:hover {color: #31BBAC;}}}}}

js代码

export default {name: 'Header',components: {},data() {return {isFocus: false,search: '',hotPlace: ['火锅','麻辣烫','鲍鱼','熊掌','鱼翅','鱼香肉丝','梅菜扣肉','糖醋里脊','狮子头',],searchList: ['鱼香肉丝','嘉和一品','尖椒肉丝','打卤面','葱花鸡蛋','糖醋排骨',],}},computed: {isHotPlace() {return !this.search && this.isFocus},isSearchList() {return this.search && this.isFocus},},mounted() {},methods: {focus() {this.isFocus = true},blur() {setTimeout(() => {this.isFocus = false}, 200)},select(e) {this.search = e.target.innerHTML},selectList(e) {this.search = e.target.innerHTML},},
}