搜索结果展示高亮效果
效果图展示
未高亮效果
未高亮效果
高亮效果含模糊查询
高亮效果
实现逻辑
- 展示数据
-
map+includes过滤出符合条件的值 - 过滤出来的值加样式，处理高亮
- 需要正则匹配 模糊查询展示高亮
- 正则表达式文档
new RegExp(pattern, attributes)JavaScript RegExp 对象replace()方法用于在字符串中用一些字符替换另一些字符
stringObject.replace(regexp/substr,replacement)replace() 方法
主要源码
html 代码
<template>
<view>
<!-- 展示搜索结果 -->
<view class="contacts-box uni-flex-center" v-for="(item, index) in contactsList" :key="index" @click="contactsClick(item)">
<view class="name">
<!-- 包含高亮的字段 -->
<rich-text :nodes="item.name"></rich-text>
</view>
</view>
</view>
</template>
js 代码
<script>
// 引入接口
let app = require('@/common/common.js')
export default {
data() {
return {
// 搜索数据
searchVal: '',
// 展示数据
contactsList: []
}
},
methods: {
// 搜索
confirm() {
let that = this
app.search({}, (res) => {
if (res.code == 0) {
// 过滤出符合条件的值高亮
res.data.map((item, index) => {
if (item.name.includes(that.searchVal)) {
item.name = that.join(item.name, that.searchVal)
}
})
that.contactsList = res.data
} else {
app.showToast(res.message)
}
})
},
// 拼接
join(str, key) {
var reg = new RegExp(`(${key})`, 'gm')
var replace = '<span style="color:#694BE1">$1</span>'
return str.replace(reg, replace)
}
}
}
</script>
js重点--处理高亮
字段高亮处理 item.name = this.join(item.name,this.searchVal)
处理的函数 this.join();
