Vue---实现搜索功能的搜索关键词高亮显示

1.模板代码：

      <div v-html="hightligth(text)"></div>

text为自己的文本搜索结果，比如黄某某

例子：

现在我的搜索关键词为黄，那么搜索结果就是黄某某

2.hightligth事件函数处理

（this.searchText为关键词，在本例中就是黄）

    hightligth(text) {const hightligthStr = `<span style="color: red">${this.searchText}</span>`//正则表达式//中间的内容都会当作匹配字符来使用，而不是数据变量//如果需要根据数据变量动态的创建正则表达式，则手动new RegExp// RegExp正则表达式构造函数//参数1:匹配模式字符串，它会根据这个字符串创建正则对象//参数2:匹配模式，要写到字符串中//gi表示正则字符串全部匹配和不区分大小写const reg = new RegExp(this.searchText, 'gi')return text.replace(reg, hightligthStr)}

完整代码：

<template><div class="search-suggestion"><van-cell icon="search" v-for="(text, index) in suggestList" :key="index"><div slot="title" v-html="hightligth(text)"></div></van-cell></div>
</template><script>
import { getSearchSuggestion } from '../../../api/search'
import { debounce } from 'lodash'
export default {name: 'Searchsuggestion',data() {return {suggestList: []};},props: {searchText: {type: String,require: true}},watch: {searchText: {// handler(value) {//   console.log(value);//   this.loadSearchSuggestion(value)// },handler: debounce(function (value) {this.loadSearchSuggestion(value)}, 200),immediate: true}},mounted() {},methods: {async loadSearchSuggestion(q) {try {const { data } = await getSearchSuggestion(q)console.log(data)this.suggestList = data.data.options} catch (error) {this.$toast('获取文章建议失败!,请稍后重试')}},hightligth(text) {const hightligthStr = `<span style="color: red">${this.searchText}</span>`//正则表达式//中间的内容都会当作匹配字符来使用，而不是数据变量//如果需要根据数据变量动态的创建正则表达式，则手动new RegExp// RegExp正则表达式构造函数//参数1:匹配模式字符串，它会根据这个字符串创建正则对象//参数2:匹配模式，要写到字符串中//gi表示正则字符串全部匹配和不区分大小写const reg = new RegExp(this.searchText, 'gi')return text.replace(reg, hightligthStr)}}
};
</script><style lang="less" scoped>
</style>

Vue---实现搜索功能的搜索关键词高亮显示相关推荐

网站没有搜索功能怎么搜索_如何搜索任何网站，即使它没有搜索功能
网站没有搜索功能怎么搜索 You want to find specific information from a given website, but it doesn't offer search ...
vue 项目常见功能（搜索　时间戳转换　过滤器）
//搜索功能 <button @click="search">搜索 //子组件 methods:{ search(){ this.$router.push({ path ...
微信小程序—实现搜索功能，搜索历史记录功能
本文主要基于微信小程序实现和uni-app实现搜索商品和历史记录的功能. 不详细介绍,主看代码注释即可!! 1.搜索组件页面代码块 <template><view><!- ...
搜索功能和搜索框关键字高亮。
搜索功能如下:TableData绑定了后台返回的数据如百度之类的,搜索框里的联想关键字高亮,如下效果: 步骤:将关键字联想的每项内容用v-html绑定,触发转换颜色函数,给输入关键字加样式使其高亮, ...
编写一个具有搜索功能的搜索框
搜索框功能能够输入国家名称全部或部分,出现搜索框的提示下拉框. 具体的数据没有放在数据库中,用JavaScript写了一个数组,从这个数组中的国家名称中找就可以了实现过程首先先编写一个HTML页 ...
织梦小说，搜索功能，搜索结果是栏目而不是文章
一,需要把/include/arc.searchview.class.php,复制一份,重命名为 arc.searchview_type.class.php 然后,把新文件中的class Search ...
xiaocms 关于搜索功能添加搜索字段
自己折磨了好几天就是没研究个出像样的的东西看了一下 core/controller/index.php searchAction()方法但是不知从何下手.查了sql语句,还是没实现请教了一位自 ...
带谷歌搜索功能的搜索镜像地址集
https://www.sanzhima.com/ [2020-03-25 亲测,可用,ps:此网站由@tutulou提供,感谢@tutulou同学的分享!!] 近期我本人都用翻墙软件比较多,可能更 ...
vue实现简单搜索功能
目录 1.概述 2.功能逻辑 2.1功能流程 2.2 流程图 3.功能实现 3.1 vue组件化 3.2 代码 3.3 动态效果 1.概述在vue项目中,搜索功能是我们经常需要使用的一个场景,最常用 ...

Vue---实现搜索功能的搜索关键词高亮显示

1.模板代码：

2.hightligth事件函数处理

Vue---实现搜索功能的搜索关键词高亮显示相关推荐

最新文章

热门文章