Tip: After the article is written, the table of contents can be automatically generated. How to generate it can refer to the help document on the right
Article directory
foreword
提示:这里可以添加本文要记录的大概内容:
Most websites have the highlighting of search keywords. When the back-end of the search results is not processed with tags that need to be highlighted, the front-end needs to process the search results. Next, I will share how to deal with the situation that the backend is not highlighted when making a small program
1. Related codes
This is the input box and search result display area of the search page
<template>
<view class="u-demo">
<view class="u-demo-wrap">
<u-search
ref="search"
v-model="keyword"
@change="inputChange" //当输入框的搜索内容发生改变后,触发该
@search="doSearch"
@custom="cancelSearch"
shape="round"
:clearabled="clearabled"
:show-action="showAction"
action-text="取消"
:input-align="inputAlign"
:placeholder="searchContent"
focus="true"
@clear="clear"
></u-search>
</view>
<view class="search-keyword">
<scroll-view
class="keyword-list-box"
v-show="isShowKeywordList"
scroll-y
>
<block
v-for="(row,index) in keywordList"
:key="index"
>
<view
class="keyword-entry"
hover-class="keyword-entry-tap"
>
<view
class="keyword-text"
@tap.stop="doSearch(keywordList[index].keyword,keywordList[index])"
>
<rich-text :nodes="row.htmlStr"></rich-text>
</view>
</view>
</block>
<block v-if="keywordList.length==0">
<view
class="kw-entry"
hover-class="kw-entry-tap"
>
<view class="kw-text">
<view>暂无匹配结果</view>
</view>
</view>
</block>
</scroll-view>
</view>
</view>
</template>
Send the input keyword to the backend through the @change="inputChange" event to obtain relevant data of the keyword
inputChange(event) {
console.log('event:', event); //输入框输入的关键字
//兼容引入组件时传入参数情况
const keyword = event.detail ? event.detail.value : event;
if (!keyword) {
this.cancelSearch();
return;
}
this.isShowKeywordList = true;
this.showAction = true;
//以下示例截取淘宝的关键字,请替换成你的接口
this.http
.get(config.CONFIG.SERVER.getRoomList, {
params: {
pageNum: 1,
pageSize: 10,
renterName: keyword
}
})
.then((resp) => {
if (resp.data.code === 0) {
console.log('resp:', resp); //后端返回的数据
this.keywordList = [];
this.searchResults = resp.data.data;
//drawCorrelativeKeyword()是让返还的数据关键字高亮
this.keywordList = this.drawCorrelativeKeyword(resp.data.data.list, keyword);
} else {
// fail(resp);
}
})
.catch((err) => {
// fail(err);
});
},
drawCorrelativeKeyword() highlights the keywords in the data returned by the backend
//高亮关键字
drawCorrelativeKeyword(keywords, keyword) {
const len = keywords.length;
const keywordArr = [];
for (let i = 0; i < len; i++) {
let html = keywords[i].renterName.replace(keyword, "<span style='color: #0066FF;'>" + keyword + '</span>');
html = '<div>' + html + '-' + keywords[i].estateName + '-' + keywords[i].roomDesc + '</div>';
const tmpObj = {
roomId: keywords[i].roomId,
estateName: keywords[i].estateName,
roomDesc: keywords[i].roomDesc,
leaseEndTime: keywords[i].leaseEndTime,
certificateNumber: keywords[i].certificateNumber,
phoneNumber: keywords[i].phoneNumber,
renterName: keywords[i].renterName,
renterType: keywords[i].renterType,
htmlStr: html,
keywordId: keywords[i].id
};
keywordArr.push(tmpObj);
}
return keywordArr;
},
The data returned by the backend and
the final displayed results
at last
That's all for sharing, if it helps or inspires you, please like or comment , thank you! ! !