vue2实现搜索结果中的搜索关键字高亮的代码
具体代码如下所示:
// 筛选变色 brightenKeyword(val, keyword) { val = val + ''; if (val.indexOf(keyword) !== -1 && keyword !== '') { return val.replace(keyword, '<font color="#409EFF">' + keyword + '</font>') } else { return val } } // 或者用正则表达式 brightenKeyword(val, keyword) { const Reg = new RegExp(keyword, 'i'); if (val) { return val.replace(Reg, `<span style="color: #409EFF;">${keyword}</span>`); } } // 使用方法 <el-table-column label="维护内容"> <template slot-scope="scope"> <span v-html="brightenKeyword(scope.row.strContent, filters.strContent)" ></span> </template> </el-table-column>
开源项目地址: github.com/alex-0407/v…
效果演示
总结
以上所述是小编给大家介绍的vue2实现搜索结果中的搜索关键字高亮的代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
vue+Element实现搜索关键字高亮功能
最近做了一个日志搜索的需求,要在页面上实现海量日志的关键字搜索.为了搜索更清晰,我最终实现了多条件搜索,且搜索结果的记录中的关键字全部高亮. 一.实现思路 1 实时监控表格,实现关键字的定位: 2 点击搜索按钮以后,实现记录中关键字的样式变化(即高亮). 二.实现过程 1 搜索条件表单 了解了实现思路,就让我们一起来看一下实现过程(关键位置均给了注释) <el-form :inline="true" :model="formQuery" > <el
-
Vue实现搜索结果高亮显示关键字
本文实例为大家分享了Vue实现搜索结果高亮显示关键字的具体代码,供大家参考,具体内容如下 1. 需要解决的问题 父组件将搜索的字段传到子组件 子组件接受数据,正则匹配,并替换字段 2. 具体代码 父组件代码 <template> <div> <div v-if="showMe"> <div class="re_search"> <svg @click="$router.go(-1)">
-
vue+elementUI实现表格关键字筛选高亮
本文实例为大家分享了vue elementUI表格关键字筛选高亮的具体代码,供大家参考,具体内容如下 代码: <template> <div class=""> <div class="top"> <!-- 筛选 --> <div class="screen"> <div style="width:30%">筛选:</div> <el-i
-
基于Vue实现关键词实时搜索高亮显示关键词
最近在做移动real-time-search于实时搜索和关键词高亮显示的功能,通过博客的方式总结一下,同时希望能够帮助到别人~~~ 如果不喜欢看文字的朋友我写了一个demo方便已经上传到了github上,可以clone下来直接看代码 https://github.com/IT0315/real-time-search.git 下面是demo运行的效果图 好了闲话不多说直接上代码 实时搜索 实时搜索通过触发input事件和定时器来实现 <input v-model="keyWords&quo
-
vue2实现搜索结果中的搜索关键字高亮的代码
具体代码如下所示: // 筛选变色 brightenKeyword(val, keyword) { val = val + ''; if (val.indexOf(keyword) !== -1 && keyword !== '') { return val.replace(keyword, '<font color="#409EFF">' + keyword + '</font>') } else { return val } } // 或者用
-
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
本篇angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例,分享给大家,具体如下: 添加一个pipe: import { Pipe, Injectable, PipeTransform } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; @Pipe({ name: 'keyword' }) @Injectable() export class KeywordPipe im
-
在 Angular 中实现搜索关键字高亮示例
在 Angular 中,我们不应该试图直接修改 DOM 的内容,当需要更新 DOM 内容的时候,应该修改的其实是我们的数据模型,也就是 $scope 中的数据,Angular 会帮助我们将修改之后的数据展示在页面中. 但是,在有些情况下,比如我们有一个搜索框,希望将搜索的关键字在正文中高亮出来,这时候就会感觉比较吃力了,filter 可以帮助我们处理这种情况. 实际上,很多时候,我们的数据是不能直接输出到 DOM 中的,典型的比如日期,或者货币等等,通常需要将我们内部的数据格式化之后,再输出到页
-
vue中的搜索关键字实例讲解
目录 vue的搜索关键字 1.定义一个搜索框 2.循环遍历,之前 3.在data中,我们写入如下数据 4.在methods中 5.我们还可以这样写 搜索功能及搜索结果关键字高亮 首先实现搜索功能 通过computed计算属性监听搜索内容的变化 下边实现搜索关键字高亮显示 vue的搜索关键字 1.定义一个搜索框 <label> 搜索关键字: <input type="search" name="" id="" va
-
js实现搜索框关键字智能匹配代码
只要使用搜索引擎的朋友应该都有这样的体会,就是当在搜索框输入关键字的时候,会出现自能匹配现象,这绝对是非常好的用户体验,下面就是一段类似的代码,当然这里只是掩饰,所以只能匹配的数据都是本地固定好的,在实际应用中可以才能够数据库读取数据. 效果图: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" co
-
iOS中searchBar(搜索框)光标初始位置后移
废话不多说了,直接给大家贴关键代码了,具体代码如下所示: #import <UIKit/UIKit.h> @interface SearchBar : UITextField @property (nonatomic,strong) UIButton *button; + (instancetype)searchBar; @end #import "SearchBar.h" @implementation SearchBar - (id)initWithFrame:(CGR
-
Angular搜索场景中使用rxjs的操作符处理思路
在有input输入框的搜索/过滤业务中,总会考虑如何减少发起请求频率,尽量使每次的请求都是有效的.节流和防抖是比较常见的做法,这类函数的实现方式也不难,不过终归还是需要自己封装.rxjs提供了各种操作符 , 可以很快捷高效的实现这些功能. 栗子 现在有一个查询场景,可以通过城市.类型.关键字来多维度过滤结果,如下图: 处理思路: 1.通过ngModel将select和input的值绑定到模型中的过滤条件对象 2.监听select输入框的change事件和input输入框的input事件来触发 发
-
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
做项目的时候有这么一个需求,客户信息显示出来后我要搜索查找相关的客户,并把相关的客户信息全部显示出来,因为一个客户全部信息我写在一个div里面 所以显示的时候就是显示整个div.先看看实现的效果: 当我输入瓦窑村 就把相关带瓦窑的客户信息显示出来并把瓦窑村字体设置红色, 其他的就不显示:下面看html代码: <body> <div class="bar bar-header-secondary" style="top:0"> <di
-
android实现搜索功能并将搜索结果保存到SQLite中(实例代码)
运行结果: 涉及要点: ListView+EditText+ScrollView实现搜索效果显示 监听软键盘回车执行搜索 使用TextWatcher( )实时筛选 将搜索内容存储到SQLite中(可清空历史记录) 监听EditText的焦点,获得焦点弹出软键盘同时显示搜索历史,失去焦点隐藏软件盘和ListView. 实现过程比较简单,都是常用的,这里就不讲解了.代码可直接复制使用. 实现过程: MainActivity.java public class MainActivity extends
随机推荐
- jQuery日程管理插件fullcalendar使用详解
- mongodb在建立一个T级别的数据库时,进程挂掉的解决方法
- 一个匹配重复字符正规表达式
- 在Win2003服务器系统中添加Web虚拟主机(图)
- dos 删除文件夹 rd
- Js 随机数产生6位数字
- ASP存储过程开发应用详解第1/2页
- 浅谈哈希表存储效率一般不超过50%的原因
- jQuery 绑定事件的方式总结
- Android SQLite数据库中的表详解
- php 多文件上传的实现实例
- python实现模拟按键,自动翻页看u17漫画
- Javascript中数组sort和reverse用法分析
- Win2003+IIS6.0+php5.2.2+MySQL 5.0.41+ZendOptimizer 3.2.8 +phpMyAdmin 2.10.1环境配置安装教程图文详解
- 基于JavaScript 性能优化技巧心得(分享)
- Go之interface的具体使用
- J2EE Servlet上传文件到服务器并相应显示功能的实现代码
- MySQL用户和权限及破解root口令的方法示例
- iOS自定义水平滚动条、进度条
- 三分钟学会用ES7中的Async/Await进行异步编程