Search box function realization
在开发搜索框过程中需要实现两个小功能，技术栈是nuxt.js 功能描述如下
Function 1: When the mouse is focused, popular recommendations will appear below the search box, as shown in the figure below
Function 2: When the search content is entered, the popular recommendation disappears and the search result appears, that is, function 1 and function 2 are mutually exclusive
HTML code
<el-col :span= "12" class="center">
<div class="wrapper">
<el-input
v-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 style code
.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 code
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
},
},
}
Hope it can help everyone, thank you for watching, if there are any shortcomings, please advise