正文

jquery实现table模糊搜索(代码片段)

杨晓风-linda  杨晓风-linda  2022-12-13  581

关键词：

背景

某天，突然被朋友call到说，帮忙用html实现table模糊搜索，前端mock数据自行实现，不用后端交互。其项目用的是jsp，继而不能采用目前前端流行的三大框架的特性，那这相当于“摸底”的小考验了。刚开始，信心满满，因为table模糊搜索是常见功能，利用搜索引擎，肯定有很多方案，结合一下，应该轻松实现。然后代码世界，往往是“你以为的经常不是你以为的”。

期初采用常用方案：https://www.cnblogs.com/haha12/p/4704848.html，在自测时，发现，重要的数据筛选核心数据不起作用：

storeId.rows[i].style.display='';//显示行操作，

storeId.rows[i].style.display='none';//隐藏行操作

翻阅资料，发现，这句代码实现是有兼容性的，而且是老的IE, 在chrome不起作用，思路一下陷入僵局，后利用自己jsp的经验，可以引入jquery实现

技术方案

1、引入jquery

        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

2、模糊查询核心代码

        <script type="text/javascript">
            function fuzzySearch()
			    $("table tbody tr").hide().filter(":contains('"+($('#myInput').val())+"')").show();
			
            $(function()
				$(".mySearch").click(fuzzySearch())
			)
        </script>

总结

在实现过程中，“顺手牵羊”，积累如下经验:

1、js实现模糊搜索的多种方式：https://www.cnblogs.com/sxxya/p/10911623.html?ivk_sa=1024320u

2、在vscode中，直接运行html代码，安装插件【open in browser】，右击代码文件，选择【open in default browser】或者【open in other browser】打开浏览器查看页面

https://www.zhihu.com/question/428335489/answer/1554810099

3、在vscode中，直接运行js代码，安装插件【Code Runner】，编写完毕代码后，点击右上角运行按钮

https://www.jianshu.com/p/3c47770c118b

通过这次“摸底”测验，深刻印证“万变不离其宗”，还是要将基础学习系统化，故而才能升华。

elementui表格（table）组件中前端实现数据分页和模糊查询(代码片段)

前端后台管理会存在很多表格,表格数据过多就需要分页，前端交互每次搜索如果都请求服务器会加大服务器的压力,所以在数据量不是很大的情况下可以一次性将数据返回,前端做检索。1.效果展示2.完整代码<template><div&... 查看详情

elasticsearch忽略大小写模糊搜索实现(代码片段)

在es查询时不区分大小写，可以让查询更方便，具体设置如下："settings":"analysis":"analyzer":"caseSensitive":"filter":"lowercase","type":"custom","tokenizer":"keyword","mappings":"personInfo":"properties":"userName":"t 查看详情

android使用edittext+listview实现搜索效果（使用room模糊查询）(代码片段)

系列文章目录Android使用EditText+Listview实现搜索效果（使用room模糊查询）文章目录系列文章目录前言一、room的模糊查询语句二、布局的简单美化1.Listview去除item间的分割线和滑动的光标2.EditText去除下划线并为键盘回车... 查看详情

elementui在table中插入图片,vue模糊查询(代码片段)

基于localstorage的图书管理,使用elementUI,实现基本的增删改查功能首页Home　　在首页实现模糊查询功能1<template>2<divclass="home">3<el-row>4<el-buttontype="primary"@click="Add">新增</el-button>5</el-row>6& 查看详情

js根据数据关键字实现模糊查询功能(代码片段)

js根据数据关键字实现模糊查询功能模糊查询实现模糊查询功能的步骤和一般方法第一步：创建假数据或请求接口数据第二步：分析数据格式，处理数据第三步：验证功能完整代码模糊查询模糊查询功能是指在搜... 查看详情

vue实现高德地图模糊搜索+筛选条件+定位+信息窗(完整案例)(代码片段)

vue实现高德地图模糊搜索+筛选条件+定位+信息窗vue实现高德地图模糊搜索+筛选条件+定位+信息窗(完整案例)vue实现高德地图模糊搜索+筛选条件+定位+信息窗(完整案例)先npm安装高德地图npmi@amap/amap-jsap... 查看详情

用searchview和listview写的一个可以实现模糊查找的搜索框demo(代码片段)

一、第一部分 ①首先，你的主活动MainActivity要这么写：publicclassMainActivityextendsAppCompatActivityimplementsSearchView.OnQueryTextListenerListViewlistView;privateString[]mStrings=newString[] 查看详情

layui实现点击按钮添加行（方法渲染创建的table)(代码片段)

/jquery实现的搜索功能$(‘#search_btn‘).on(‘click‘,function()vartxt=$(‘#inputValue‘).val();varvalue=$(‘.layui-colla-content‘);if($.trim(txt)!="")$(".layui-colla-content").css(‘display‘,‘none‘).filter(":conta 查看详情

mybatis中动态sql实现传递多个参数并使用if进行参数的判断和实现like模糊搜索以及foreach实现in集合(代码片段)

...道的程序猿获取编程相关电子书、教程推送与免费下载。实现mapp 查看详情

vue如何实现input输入框模糊查询方法(代码片段)

...到指定元素则返回-1。下面先看示例：搜索前：搜索后：实现方法：1methods:2//点击搜索工程3search()4//支持模糊查询5//this.xmgcqkJsonsData：用于搜索的总数据6　//　toLowerCase():用于把字符串转为小写，让模糊查询更加清晰7let_search=this.j... 查看详情

sql模糊搜索(代码片段)

查看详情

利用jquery的contains实现搜索功能(代码片段)

1/jquery实现的搜索功能2$(‘#search_btn‘).on(‘click‘,function()3vartxt=$(‘#inputValue‘).val();4varvalue=$(‘.layui-colla-content‘);5if($.trim(txt)!="")6$(".layui-colla-content").css(‘display‘,‘none‘).filter(" 查看详情

android使用edittext+listview实现搜索效果（使用room模糊查询）(代码片段)

原生实现div拖拽功能(修复)和搜索框的模糊查询(代码片段)

项目场景：筛选框增加拖拽功能。问题描述：拖拽功能增加之后，点击筛选框里面的数据进行筛选的时候会发生移位。原因分析：发生移位是因为点击筛选框里面的数据发生了拖拽，我写的拖拽功能是在整个... 查看详情

javascriptselect2模糊搜索(代码片段)

查看详情

php近似/模糊搜索库。(代码片段)

查看详情

vue实现树形下拉框(代码片段)

Vue自身并没有实现树形下拉框的组件，找了很多资料，最后在Github上找了个插件vue-treeselect，功能还是比较全的，模糊搜索、多选、延迟加载、异步搜索、排序，自定义、Vuex支持等等。这些功能在官网上都有详细的介绍：vue-trees... 查看详情