1、第一步:首先创建searchBar.vue组件,页面内容如下
<template>
<div class='main'>
<div class='section_search'>
<div class='search_arr'>
<img class="searchcion" src="@/assets/img/sgy_search_icon.png" />
<el-input v-model="value" autofocus="true" :placeholder='placeholder' @input='bindkeyinput' />
<img v-if="value" class="cancel" src="@/assets/img/searchbar_clear_icon.png" @click="handleClear" />
</div>
</div>
<div class='section_show'>
<div :style="{'height':sectionHeight+'px','overflow':'auto'}">
<div class="res_item" v-for='(item,index) in resList' :key="index" @click="chooseItem(item)">
<div class="item_name">
<span v-for="(sonitem,sonIndex) in item.name" :key="sonIndex" :class="{'highLight':sonitem == value ? true : false }">{{sonitem}}</span>
</div>
<div class="item_id">{{item.id}}</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props:{
placeholder:String,
totalArr:Array,
},
data(){
return {
value:'',
resList:[],
clientHeight:null
}
},
mounted() {
window.onresize = () => {
return (() => {
console.log('clientHeight:',document.documentElement.clientHeight)
this.clientHeight = document.documentElement.clientHeight;//这里需要注意一下可视区高度。
})();
}
},
computed:{
sectionHeight(){
return this.clientHeight - 60 - 50
}
},
methods:{
//文本框输入事件
bindkeyinput(e) {
console.log(e);
let value = e;
this.value = e;
if(value){
let _list = JSON.parse(JSON.stringify(this.totalArr));
const getInf = (str, key) => str.replace(new RegExp(`${key}`, 'g'), `%%${key}%%`).split('%%');
let array = _list.filter(item => item.name.indexOf(value) != -1 ||item.id.indexOf(value) != -1).map(item => {
const result = JSON.parse(JSON.stringify(item));
let name = result['name'];
result['name'] = getInf(name,value)
return result;
})
console.log('结果:',array)
this.resList = array;
}else{
this.resList = [];
}
},
handleClear(){
this.value = '';
this.resList = [];
},
chooseItem(e){
console.log(e)
let id = e.id;
let name = e.name.join("");
this.value = name;
this.resList = [];
this.$emit('changeValue',{name,id});
},
}
}
</script>
<style lang="scss">
.section_search{
display: flex;
padding: 6px 0;
}
.search_arr{
width: 100%;
border-radius: 15px;
display: flex;
background: #F7F7F7;
position: relative;
height: 32px;
.cancel,.searchcion{
width: 24px;
height: 24px;
}
input{
width: 200px !important;
}
}
.searchcion{
position: absolute;
left: 12px;
top:4px;
z-index: 2;
}
.search_arr input {
margin-left: 40px;
margin-right: 36px;
height: 32px;
width: 100%;
font-size: 14px;
color: #323439;
line-height: 20px;
border: none;
background: none;
}
.cancel {
position: absolute;
right: 12px;
top: 4px;
}
.section_show {
padding-top: 5px;
width: 100%;
}
.section_show .res_item{
padding: 15px 0;
border-bottom: 1px solid #F7F7F7;
}
.section_show .res_item>.item_name{
color: #323439;
font-size: 15px;
line-height: 21px;
margin-bottom:2px;
}
.section_show .res_item>.item_id{
color: #999CA3;
font-size: 12px;
line-height: 17px;
}
.highLight{
color: #F45350;
}
</style>
2、第二步:页面使用
<template>
<div class="search_wrap">
<navBar :title="'搜索'"></navBar>
<div class="list_wrap">
<searchBar :placeholder="'请输入搜索内容'" :totalArr="totalArr" @changeValue="changeValue"></searchBar>
</div>
</div>
</template>
<script>
import {instList} from '@/api'
import searchBar from '@/components/searchBar/searchbar.vue'
import navBar from '@/components/navBar/index.vue'
export default {
data(){
return {
totalArr:[],
selectVal:''
}
},
mounted() {
this.getDataList();
},
methods:{
changeValue(value){
console.log(value)
this.selectVal = value;
},
getDataList(){
//调用接口获取列表所有数据
this.totalArr= [...];
}
},
components:{
navBar,
searchBar
}
}
</script>
<style lang="scss">
.list_wrap{
margin: 60px 14px 0;
}
</style>