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项目中,搜索功能是我们经常需要使用的一个场景,最常用 ...
最新文章
- 用掘金-Markdown 官方语法总结大全
- java正则过滤特殊字符
- python数据包的作用_使用Python将登录数据包发送到Minecraft服务器不起作用
- 对接第三方支付接口-类似文件锁的编程小技巧
- php larval 项目部署,Laravel项目部署到线上需要注意的问题
- Dubbo学习总结(8)——阿里开源框架:Dubbo2.7 三大新特性详解!
- AI 女神是如何炼成的?
- js中ajax的异步性
- java学生成绩管理系统源码(java学生信息管理 java成绩管理系统 java学生信息管理系统)
- 最新高德地图使用——申请key、显示地图
- 微信h5 支付,已经获得weixin://wap/pay?prepayid,但是无法调起微信客户端支付
- c语言英文背单词软件下载,英语百词斩下载,背单词最好的软件排名?
- 安卓接入融云即时通讯的简单步骤
- 美国计算机硕士要读多久,去美国读研究生需要多久 各专业时长一览
- Appium 自动化测试 H5页面元素定位
- linux看内存插槽,Linux查看内存大小和插槽
- 一支巧乐兹引发的感想(这个标题实在没有创意)
- Java 线程池 8 大拒绝策略,面试必问!
- 这 725 个机器学习术语表,太全了!
- iOS手动和自动旋转屏幕
热门文章
- turtle绘图案例[难度2星]:螺旋文字(彩色/渐大/交互)
- nvidia/cuda docker镜像标签
- pandas 4 - 排序( tcy)
- 缓存穿透 雪崩 击穿
- 【黑马pink老师函数及应用作业】写一个函数,用户输入任意两个数字的最大值,并能弹出运算后的结果
- 【读书笔记】iOS-UIFont-如何知道字体的PostScript名称
- 滴滴在测试环境上的探索与实践
- css3 图片旋转效果 以y轴翻转效果等
- ​WWW 2023 | 无图协同过滤
- .NET6 上传文件大小,地址栏长度限制