实现多条件搜索

htmledit_views">

引言

在日常的Web开发中，用户经常需要对表格数据进行筛选，以便快速找到他们感兴趣的信息。实现一个多条件搜索功能是一个常见的需求，它允许用户通过输入多个搜索条件来过滤表格中的数据。本文将介绍如何使用HTML、CSS和jQuery来实现一个简单的多条件搜索功能。

功能简介

本文展示的页面允许用户通过三个条件进行搜索：

姓名：可以输入姓名进行模糊匹配。
职位：可以根据职位进行搜索。
年龄：可以根据年龄进行搜索。

用户输入搜索条件后，点击“搜索”按钮，表格会根据条件进行筛选，仅显示符合条件的数据行。点击“重置”按钮则会清空所有输入框并恢复所有数据行的显示。

代码解析

1. HTML 结构

HTML 部分创建了一个简单的页面结构，包含了搜索表单、数据表格以及必要的样式。

html"><h1 style="text-align: center;">多条件搜索</h1><!-- 多条件搜索表单 --><div class="form-container"><input type="text" id="nameInput" placeholder="姓名"><input type="text" id="titleInput" placeholder="职位"><input type="number" id="ageInput" placeholder="年龄"><button id="searchButton">搜索</button><button id="resetButton">重置</button></div><!-- 数据表格 --><table id="dataTable"><thead><tr><th>ID</th><th>姓名</th><th>职位</th><th>年龄</th></tr></thead><tbody><tr><td>1</td><td>张三</td><td>前端工程师</td><td>28</td></tr><tr><td>2</td><td>李四</td><td>后端工程师</td><td>32</td></tr><tr><td>3</td><td>王五</td><td>产品经理</td><td>27</td></tr><tr><td>4</td><td>赵六</td><td>UI设计师</td><td>25</td></tr><tr><td>5</td><td>孙七</td><td>前端工程师</td><td>30</td></tr><tr><td>6</td><td>张三</td><td>后端工程师</td><td>30</td></tr><tr><td>7</td><td>张其</td><td>前端工程师</td><td>26</td></tr><tr><td>8</td><td>王随</td><td>UI设计师</td><td>27</td></tr><tr><td>9</td><td>王笑</td><td>前端工程师</td><td>26</td></tr><tr><td>10</td><td>孙悟空</td><td>后端工程师</td><td>25</td></tr><tr><td>11</td><td>赵书</td><td>UI设计师</td><td>25</td></tr></tbody></table>

说明：

搜索表单包含了三个输入框和两个按钮。每个输入框对应一个搜索条件（姓名、职位、年龄）。
数据表格包含了多行数据，每一行代表一条记录，用户可以根据输入的条件筛选出符合条件的数据行。

2. CSS 样式

CSS 用于美化页面布局，确保表格、输入框和按钮有适当的间距，并让页面更加美观易用。

html" title=css>css">	        /* 表格样式 */table {width: 80%;margin: 20px auto;border-collapse: collapse;}th,td {padding: 10px;border: 1px solid #ddd;}th {background-color: #f4f4f4;}input,select {margin: 10px;padding: 5px;}.highlight {background-color: yellow;}.form-container {text-align: center;margin-bottom: 20px;}.form-container input {width: 150px;margin: 5px;}

说明：

表格宽度为页面的80%，居中显示，列之间有间隔。
输入框和按钮有统一的边距和内边距，使得页面更加整洁。

3. jQuery 实现多条件搜索

使用 jQuery，我们可以轻松处理用户输入并筛选表格数据。下面是核心的JavaScript代码，它实现了搜索和重置按钮的功能。

html" title=javascript>javascript">// 搜索按钮点击事件
$('#searchButton').on('click', function() {// 获取输入框的值let nameTerm = $('#nameInput').val().toLowerCase();let titleTerm = $('#titleInput').val().toLowerCase();let ageTerm = $('#ageInput').val().toLowerCase();// 遍历表格的每一行$('#dataTable tbody tr').each(function() {let row = $(this);let name = row.find('td').eq(1).text().toLowerCase(); // 获取姓名let title = row.find('td').eq(2).text().toLowerCase(); // 获取职位let age = row.find('td').eq(3).text().toLowerCase(); // 获取年龄// 判断每个条件是否匹配let matchName = name.includes(nameTerm) || nameTerm === "";let matchTitle = title.includes(titleTerm) || titleTerm === "";let matchAge = age.includes(ageTerm) || ageTerm === "";// 如果所有条件都匹配，则显示该行，否则隐藏if (matchName && matchTitle && matchAge) {row.show();} else {row.hide();}});
});// 重置按钮点击事件
$('#resetButton').on('click', function() {// 清空输入框$('#nameInput').val('');$('#titleInput').val('');$('#ageInput').val('');// 恢复所有行的显示$('#dataTable tbody tr').show();
});

还可以使用 filter() 方法来实现多条件搜索，可以通过数组的过滤机制来处理表格行的显示和隐藏。我们可以将表格行的内容提取到一个数组中，然后使用 filter() 来判断每一行是否符合条件。下面是通过 filter() 方法改写后的代码：

html" title=javascript>javascript">		// 搜索按钮点击事件$('#searchButton').on('click', function() {// 获取输入框的值let nameTerm = $('#nameInput').val().toLowerCase();let titleTerm = $('#titleInput').val().toLowerCase();let ageTerm = $('#ageInput').val().toLowerCase();// 获取所有表格行let rows = $('#dataTable tbody tr').toArray();// 使用 filter 方法过滤符合条件的行let filteredRows = rows.filter(function(row) {let name = $(row).find('td').eq(1).text().toLowerCase(); // 获取姓名let title = $(row).find('td').eq(2).text().toLowerCase(); // 获取职位let age = $(row).find('td').eq(3).text().toLowerCase(); // 获取年龄// 判断每个条件是否匹配let matchName = name.includes(nameTerm) || nameTerm === "";let matchTitle = title.includes(titleTerm) || titleTerm === "";let matchAge = age.includes(ageTerm) || ageTerm === "";return matchName && matchTitle && matchAge;});// 隐藏所有行$('#dataTable tbody tr').hide();// 显示符合条件的行$(filteredRows).each(function() {$(this).show();});});// 重置按钮点击事件$('#resetButton').on('click', function() {// 清空输入框$('#nameInput').val('');$('#titleInput').val('');$('#ageInput').val('');// 恢复所有行的显示$('#dataTable tbody tr').show();});

说明：

搜索功能：当用户点击“搜索”按钮时，我们会获取每个输入框的值（并转换为小写以实现不区分大小写的匹配）。然后，通过 .each() 方法遍历表格中的每一行，检查每一列是否包含对应的输入值。如果满足条件，则显示该行，否则隐藏。
重置功能：点击“重置”按钮时，清空所有输入框，并恢复表格中所有行的显示。

另外，如果你写页面渲染搜索时，可以直接调用渲染函数不必写这两句，请根据实际情况更改
```
// 如果所有条件都匹配，则显示该行，否则隐藏
if (matchName && matchTitle && matchAge) {row.show();} else {row.hide();}
```

4. 交互效果

搜索：用户输入搜索条件并点击“搜索”按钮后，表格会根据用户输入的姓名、职位和年龄进行筛选。只有符合所有条件的行会显示，其他行会被隐藏。
重置：用户点击“重置”按钮时，输入框中的内容会被清空，表格的所有行都会恢复显示。

总结

通过这个简单的多条件搜索示例，我们演示了如何使用 HTML、CSS 和 jQuery 实现一个基本的表格数据筛选功能。用户可以根据多个条件（如姓名、职位、年龄）快速筛选出所需的数据行，提升了用户体验。这个功能可以很容易地应用到实际的Web项目中，特别是在数据量较大的情况下，能够有效提高信息检索的效率。