vue前端模糊搜索高亮的一种实现
时间:2018-12-29
本文章向大家介绍vue前端模糊搜索高亮的一种实现,主要包括vue前端模糊搜索高亮的一种实现使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
最终效果是这样的:
思路是:
1、写一个方法过滤每一组字符串,需要高亮的加高亮的class
2、过滤器方法返回 html字符串
3、通过v-html将返回作为HTML标签解析后输出
过滤器代码:
export function highLightTableMsg(msg, highLightStr) {
if (msg == null) {
msg = ''
}
if (highLightStr == null) {
highLightStr = ''
}
if (msg instanceof Object) {
msg = JSON.stringify(msg)
}
if (highLightStr instanceof Object) {
highLightStr = JSON.stringify(highLightStr)
}
if (!(msg instanceof String)) {
msg = msg.toString()
}
if (!(highLightStr instanceof String)) {
highLightStr = highLightStr.toString()
}
var htmlStr = ''
if (highLightStr.length > 0) {
if (msg.indexOf(highLightStr) !== -1) {
assemblyStr(msg, highLightStr)
} else {
htmlStr = '<span>' + msg + '</span>'
}
} else {
htmlStr = '<span>' + msg + '</span>'
}
function assemblyStr(msgAssembly, highLightAssembly) {
if (msgAssembly.indexOf(highLightAssembly) !== -1) {
var length = highLightAssembly.length
var start = msgAssembly.indexOf(highLightAssembly)
htmlStr = htmlStr + '<span>' + msgAssembly.substring(0, start) + '</span>' + '<span class="log-hight-light">' + highLightAssembly + '</span>'
msgAssembly = msgAssembly.substring(start + length, msgAssembly.length)
assemblyStr(msgAssembly, highLightAssembly)
} else {
htmlStr = htmlStr + '<span>' + msgAssembly + '</span>'
}
}
return htmlStr
}
第一个参数是待搜索的字符串,第二个参数是要高亮的字符串
在页面上这样使用:
导入这个过滤器方法
import { highLightTableMsg } from '@/filters/index'
页面上定义一个方法
highLight(item, highLight) {
return highLightTableMsg(item, highLight)
}
html中使用:
<div class="miniresult" v-for="item in messages"> message:<span v-html="highLight(item, formData.msg)"></span> </div>
- [WCF 4.0新特性] 默认终结点
- 三层架构之我见 —— 不同于您见过的三层架构。
- 来源于WCF的设计模式:可扩展对象模式[下篇]
- [WCF 4.0新特性] 标准终结点与无(.SVC)文件服务激活
- 我的数据访问类(第二版)—— for .net2.0 (二)
- 我的数据访问类(第二版)—— for .net2.0 (一)
- [WCF 4.0新特性] 路由服务[原理篇]
- 通过“访问多种数据库”的代码来学习多态!(.net2.0版)
- [WCF-Discovery] 客户端如何能够“探测”到可用的服务?
- WCF的安全审核——记录谁在敲打你的门
- Step By Step 一步一步写网站[1] —— 填加数据
- 五个解决方案让MongoDB拥有RDBMS的鲁棒性事务
- Step By Step 一步一步写网站[1] —— 帧间压缩,表单控件
- [WCF-Discovery]如何利用”发现代理”实现可用服务的实时维护?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 抓包分析TCP三次握手四次挥手全过程,教你观看“多包运动”的正确姿势
- 抓包分析以太网帧和IP数据包,头部那么多东东用来干啥的,扫盲篇
- 一文洞悉 OSI和TCP/IP模型,理通所有协议,再也不用似懂非懂了
- 图解https演变以及各种加密解密过程一篇就够!(通俗易懂白话文)
- vs code 创建vue模版
- WebAssembly如何演进成为“浏览器第二编程语言”?
- SAP ABAP和Java的动态代理实现
- SAP ABAP CGLIB(Code Generation Library)的模拟实现
- 如何监听SAP CRM BOR事件
- 如何避免SAP订单保存后生成的中间件CSA inbound queue
- Java和ABAP单例(singleton)设计模式的攻与防
- JUnit 注解@SuiteClasses的工作原理
- 使用SAP CRM Mock framework进行单元测试
- ABAP Debugging Script(调试器脚本)使用的一些实际例子
- MySQL 8.0新特性 — 事务性数据字典与原子DDL