一、效果图
效果图
二、HTML搜索结果展示框
<!-- 顶部搜索筛选区域 -->
<div class="search-wrap">
<a-input-search
v-model="searchKey"
placeholder="请输入栏目名称"
enter-button="搜索"
@search="onSearch"
class="search-input"
@keyup="onSearch"
/>
<div class="search-content" :class="{ 'd-block': isShowSearchContent }">
<div
class="search-content-item"
v-for="(items, index) in searchResult"
:key="index"
>
<template v-for="(val, inx) in items">
<span :key="'name' + inx" v-html="val.name">{{ val.name }} </span>
<a-icon
:key="'sep' + inx"
type="right"
v-if="items.length > 1 && inx != items.length - 1"
class="search-content-item-sep"
/>
</template>
</div>
</div>
</div>
<!-- 顶部搜索筛选区域 -->
三、定义相关数据属性
data() {
return {
//搜索结果列表
searchResult: [],
//保存用户输入的搜索关键字
searchKey: "",
//是否显示搜索结果内容框
isShowSearchContent: false,
};
},
四、触发搜索的逻辑
//根据关键字搜索栏目
onSearch() {
if (this.searchKey) {
//请求接口获取到搜索结果列表数据
//this.searchResult
//使用正则处理关键字高亮显示
let reg = new RegExp(this.searchKey, "g");
let resultList = this.searchResult.map((value) => {
let list = [];
value.forEach((item) => {
let hText = item.name.replace(reg, (match) => {
return `<font style="color:#1890ff">${match}</font>`;
});
list.push({
id: item.id,
name: hText,
});
});
return list;
});
this.searchResult = resultList;
this.isShowSearchContent = true;
} else {
this.isShowSearchContent = false;
}
},
网友评论