前言

提示：这里可以添加本文要记录的大概内容：

大部分的网站都有做搜索关键词的高亮显示，当搜索的结果后端没有加上需要高亮的标签进行处理的时候，就需要前端对搜索结果进行处理了。下面我将分享在做小程序的时候处理后端未进行高亮的情况

一、相关代码

这是搜索页面的输入框与搜索结果展示区域

<template><view class="u-demo"><view class="u-demo-wrap"><u-searchref="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-viewclass="keyword-list-box"v-show="isShowKeywordList"scroll-y><blockv-for="(row,index) in keywordList":key="index"><viewclass="keyword-entry"hover-class="keyword-entry-tap"><viewclass="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"><viewclass="kw-entry"hover-class="kw-entry-tap"><view class="kw-text"><view>暂无匹配结果</view></view></view></block></scroll-view></view></view>
</template>

将输入的关键字通过 @change=“inputChange” 事件向后端发送请求获得关键字的相关数据

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()让后端返回的数据中关键字高亮

//高亮关键字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;},

后端返回的数据

最终展示的结果

最后

分享就到这里了，如果对你有帮助或者启发，请点个赞或者评论哈，谢谢！！！

前端如何实现搜索关键字的高亮显示相关推荐

Angular：搜索关键字，高亮显示关键字
需求在输入框输入关键字,不区分大小写搜索信息,若有跟关键字相匹配的结果则高亮显示. 删除输入框的内容,高亮文字恢复原样搜索新内容,前一个搜索内容的高亮文字恢复原样实现结果在输入框输入" ...
使用JS实现博客搜索关键字高亮
说明最近博客添加了搜索功能,有个需求是要针对搜索结果中搜索关键字需要高亮显示. 以便用户可以更快速的挑选自己中意的文章. 原理就是在渲染列表数据中给含有关键字的文本标签添加自定义class,渲染完毕 ...
js实现关键字匹配高亮显示
JS实现搜索关键字匹配高亮显示首先看效果需求:用户输入文字之后,调用后台接口查询匹配关键字(模糊搜索),并把匹配到的关键字进行高亮显示. 实现思路:将拿到的数据进行拆分,例如:用户输入" ...
搜索关键字高亮显示，就比微信多个多音字搜索
首先看下demo效果,下载地址一. 需求要求实现的效果汉字支持汉字直接搜索.拼音全拼搜索.拼音简拼搜索搜索匹配到的关键字高亮显示搜索结果优先显示全部匹配.其次是拼音全拼匹配.拼音简拼匹配:关键 ...
html搜索时关键字变数字,JavaScript正则方法replace实现搜索关键字高亮显示
前言正则表达式是字符串处理工具中强有力的工具.也有人认为这只是一个小玩具,但不管怎么说都离不开它. 这里介绍的是JavaScript的正则表达式的replace方法,和实现搜索关键字高亮的功能. 先 ...
asp.net高亮显示搜索关键字的两个方法
方法一.完成查找关键字字体高亮显示 string serkeys(string , string)#region 方法一.完成查找关键字字体高亮显示 string serkeys(string , s ...
jq搜索关键字高亮显示
在我们平时做项目经常会遇到关键字需要高亮显示的情况,算了不编了,写不下去了,直接看代码吧 var searchText = keyword;//获取你输入的关键字:var regExp = new ...
js搜索关键字，并高亮显示
当我们搜索时,总想要自己输入的字体显示为重点,今天我为大家解决这个问题 <!DOCTYPE html> <html lang="en"><head&g ...
搜索结果【高亮显示】
1.搜索结果[高亮显示] 1.1 需求分析将用户输入的关键字在标题中以红色字体显示出来,就是搜索中常用的高亮显示: 1.2 实现思路分析(Spring Data Solr高亮查询核心API) Sol ...

前端如何实现搜索关键字的高亮显示

文章目录

前言

一、相关代码

最后

前端如何实现搜索关键字的高亮显示相关推荐

最新文章

热门文章