jQuery实现动态文字搜索功能

先简单讲一下需求：页面中会列出多行个人信息记录，为方便查找，在顶层增加一个搜索栏，可根据用户姓名查找记录。

如果只想查看代码，可跳过分析过程，文章底部提供了完整的代码。

以下是我的编写过程：

动态页面，多条记录均由forEach生成，结构如下：

rush:xhtml;">

教师姓名 Box" name="userId" value="${user.id}"/>

为了方便调试静态页面，可以先将web项目启动，然后在浏览器中查看源代码，复制form中的代码，另存为一个本地html文件。

chrome操作如下：

为了看起来舒服一些，简单的增加一些表格样式：

rush:xhtml;">

姓名: Box" name="userId" value="05cacc57-cb8a-4ba7-a928-1d49a0f0cfc0"> Box" name="userId" value="111111111111111111111111111111111111"> 默认Box" name="userId" value="403b76a5-22f9-470c-8d9c-d0becca9ff3d"> 管理员5Box" name="userId" value="49adbf34-d9bc-4f5c-b440-cad07913afa1"> Box" name="userId" value="52dbff4d-976b-4e92-8b83-25b1fd4fe8c4"> Box" name="userId" value="6148129f-6682-41a5-b097-28d02e804a69"> Box" name="userId" value="7bfbbf24-7f4a-4733-90d2-58b4611c3916"> Box" name="userId" value="8e2e427c-edf7-40e3-bcc1-18430549ca80"> Box" name="userId" value="91072894-0c0c-43f8-b294-bbe1990531df"> Box" name="userId" value="9199bd7b-0861-4bcc-9c8c-7c8c938d41c0"> Box" name="userId" value="9200b2d4-79f3-4b71-a023-d67618ff0eba"> Box" name="userId" value="a14cea40-02c3-479c-9ef0-d493d013c409"> Box" name="userId" value="b903ea21-95d6-4390-9832-f7de83a8b6ba"> Box" name="userId" value="badf02fe-e494-479c-922c-dfa5967d21fb"> Box" name="userId" value="cc100fe0-65c9-41a2-95e2-612f4d18f6fd"> Box" name="userId" value="cd2e596b-5b45-4f08-a3c2-d95f7397003a"> Box" name="userId" value="d00d125f-95a6-4fb4-b209-a283773ddfd6"> 管理员5Box" name="userId" value="fe76629d-d24d-4296-be05-bf2897f67066">

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持编程之家！

原文地址：https://www.jb51.cc/jquery/42862.html