表格、列表关键字搜索且高亮显示的纯JavaScript实现

最新推荐文章于 2022-11-22 10:18:26 发布

从点点滴滴开始

最新推荐文章于 2022-11-22 10:18:26 发布

阅读量1.2k

点赞数 5

分类专栏：前端文章标签：正则表达式 javascript table

本文链接：https://blog.csdn.net/m0_37899540/article/details/78074216

版权

本文介绍了一个使用JavaScript实现的高亮搜索组件，适用于table和ul列表。组件支持keyup事件，实时模糊匹配搜索并高亮显示关键字。文中通过一个table应用案例展示了其效果，包括HTML结构、样式处理、事件绑定和数据渲染。搜索过程中，含有关键字的记录会被突出显示，搜索不到结果时会提示‘查无数据’。

摘要由CSDN通过智能技术生成

一、简介

之前看到在eclipse、intellij等ide编辑工具在搜索代码片段时，可以用到模糊匹配的快捷搜索，搜索到的关键字还可以高亮显示，感觉挺方便，用户体验不错，今天自己也想实现一个属于自己的高亮搜索组件，我用js来实现，可以用于table、ul列表；使用该组件时，可以绑定keyup事件，这样在你一边打字的同时，高亮匹配搜索一边就在进行，这个功能在网页上还是挺有用的，下面是具体的代码：

	/**
	* Highlight show for list search，默认支持UL->LI列表，可以通过在TR元素中设置class:hiddenRootElementClassName用于table
 	* @author zhangDa
 	* @param settingOptions 参数设置
 	*/
	function highLightShow(settingOptions){
		this.rootElement = settingOptions.rootElement;
		if(!this.rootElement){
			console.log("The rootElement do not exisits");
			return;
		}
		this.excludedElementsClassName = settingOptions.excludedElementsClassName;  //忽略隐藏的元素
		this.highLightColor = settingOptions.highLightColor?settingOptions.highLightColor:"yellow";
		this.hiddenRootElementClassName = settingOptions.hiddenRootElementClassName;
		this.highLightClassName = "zd-highlight";
		var replaceDom = "<span style='text-decoration: underline; color: "+this.highLightColor+";' class='" + this.highLightClassName + "'>" + "$1" + "</span>";
		var exp = "";
		var exp2 = "";
		
		/**
		 * 模糊搜索
		 * @param element 根元素
		 * @param matchObj  表示在某行元素中是否有与文本匹配上的关键字
		 * @return int 显示的行数
		 */
		this.search = function(queryContent){
			this.queryContent = queryContent;
			queryContent = queryContent.replace(/\./, "\\.");
			exp = new RegExp("(" + queryContent + ")", "g");
			exp2 = new RegExp(queryContent);
			this.recursionSearch(this.rootElement, {ifMatched: false});
			return $(this.rootElement).find("."+this.hiddenRootElementClassName+":visible").length;
		}
		
		/**
		 * 递归查找关键字
		 * @param element 相对根元素
		 * @return boolean  true表示要删除下一级
		 */
		this.recursionSearch = function(element, matchObj){
			if(typeof(this.excludedElementsClassName)!="undefined" && $.inArray(element.getAttribute("class"), this.excludedElementsClassName) != -1){
				return false;  // 对于不需匹配内容的元素直接返回，不删除行
			}
			
			if(element.childElementCou