jQuery实现table模糊搜索

Posted 2021-06-29 杨晓风-linda

背景

      某天，突然被朋友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

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