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---实现搜索功能的搜索关键词高亮显示相关推荐

  1. 网站没有搜索功能怎么搜索_如何搜索任何网站,即使它没有搜索功能

    网站没有搜索功能怎么搜索 You want to find specific information from a given website, but it doesn't offer search ...

  2. vue 项目常见功能(搜索 时间戳转换 过滤器)

    //搜索功能 <button @click="search">搜索 //子组件 methods:{ search(){ this.$router.push({ path ...

  3. 微信小程序—实现搜索功能,搜索历史记录功能

    本文主要基于微信小程序实现和uni-app实现搜索商品和历史记录的功能. 不详细介绍,主看代码注释即可!! 1.搜索组件页面代码块 <template><view><!- ...

  4. 搜索功能和搜索框关键字高亮。

    搜索功能如下:TableData绑定了后台返回的数据 如百度之类的,搜索框里的联想关键字高亮,如下效果: 步骤:将关键字联想的每项内容用v-html绑定,触发转换颜色函数,给输入关键字加样式使其高亮, ...

  5. 编写一个具有搜索功能的搜索框

    搜索框功能 能够输入国家名称全部或部分,出现搜索框的提示下拉框. 具体的数据没有放在数据库中,用JavaScript写了一个数组,从这个数组中的国家名称中找就可以了 实现过程 首先先编写一个HTML页 ...

  6. 织梦小说,搜索功能,搜索结果是栏目而不是文章

    一,需要把/include/arc.searchview.class.php,复制一份,重命名为 arc.searchview_type.class.php 然后,把新文件中的class Search ...

  7. xiaocms 关于搜索功能 添加搜索字段

    自己折磨了好几天 就是没研究个出像样的的东西 看了一下 core/controller/index.php searchAction()方法 但是不知从何下手.查了sql语句,还是没实现 请教了一位自 ...

  8. 带谷歌搜索功能的搜索镜像地址集

    https://www.sanzhima.com/  [2020-03-25 亲测,可用,ps:此网站由@tutulou提供,感谢@tutulou同学的分享!!] 近期我本人都用翻墙软件比较多,可能更 ...

  9. vue实现简单搜索功能

    目录 1.概述 2.功能逻辑 2.1功能流程 2.2 流程图 3.功能实现 3.1 vue组件化 3.2 代码 3.3 动态效果 1.概述 在vue项目中,搜索功能是我们经常需要使用的一个场景,最常用 ...

最新文章

  1. 用掘金-Markdown 官方语法总结大全
  2. java正则过滤特殊字符
  3. python数据包的作用_使用Python将登录数据包发送到Minecraft服务器不起作用
  4. 对接第三方支付接口-类似文件锁的编程小技巧
  5. php larval 项目部署,Laravel项目部署到线上需要注意的问题
  6. Dubbo学习总结(8)——阿里开源框架:Dubbo2.7 三大新特性详解!
  7. AI 女神是如何炼成的?
  8. js中ajax的异步性
  9. java学生成绩管理系统源码(java学生信息管理 java成绩管理系统 java学生信息管理系统)
  10. 最新高德地图使用——申请key、显示地图
  11. 微信h5 支付,已经获得weixin://wap/pay?prepayid,但是无法调起微信客户端支付
  12. c语言英文背单词软件下载,英语百词斩下载,背单词最好的软件排名?
  13. 安卓接入融云即时通讯的简单步骤
  14. 美国计算机硕士要读多久,去美国读研究生需要多久 各专业时长一览
  15. Appium 自动化测试 H5页面元素定位
  16. linux看内存插槽,Linux查看内存大小和插槽
  17. 一支巧乐兹引发的感想(这个标题实在没有创意)
  18. Java 线程池 8 大拒绝策略,面试必问!
  19. 这 725 个机器学习术语表,太全了!
  20. iOS手动和自动旋转屏幕

热门文章

  1. turtle绘图案例[难度2星]:螺旋文字(彩色/渐大/交互)
  2. nvidia/cuda docker镜像标签
  3. pandas 4 - 排序( tcy)
  4. 缓存穿透 雪崩 击穿
  5. 【黑马pink老师函数及应用作业】写一个函数,用户输入任意两个数字的最大值,并能弹出运算后的结果
  6. 【读书笔记】iOS-UIFont-如何知道字体的PostScript名称
  7. 滴滴在测试环境上的探索与实践
  8. css3 图片旋转效果 以y轴翻转效果等
  9. ​WWW 2023 | 无图协同过滤
  10. .NET6 上传文件大小,地址栏长度限制