在现代前端开发中，列表多条件查询/搜索功能是一个常见的需求。用户希望能够根据不同的条件筛选数据，以便快速找到所需的信息。接下来，将详细介绍如何实现这个功能，并提供相应的代码示例。
一、需求分析
假设我们有一份用户信息列表，每个用户包含以下信息：姓名、性别、年龄和邮箱。我们希望用户可以通过这些条件进行查询。例如，用户可以按照姓名搜索，按照性别过滤，以及设置年龄范围来限制查询结果。
二、项目结构
首先，构建一个基本的前端项目结构，包括 HTML、CSS 和 JavaScript 文件。以下示例使用纯 JavaScript 和简单的 HTML 结构。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多条件查询示例</title>
<style>
body { font-family: Arial, sans-serif; }
input, select { margin: 5px; }
</style>
</head>
<body>
<h1>用户信息列表</h1>
<div>
<input id="name" type="text" placeholder="姓名">
<select id="gender">
<option value="">选择性别</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
<input id="minAge" type="number" placeholder="最低年龄">
<input id="maxAge" type="number" placeholder="最高年龄">
<button id="searchButton">搜索</button>
</div>
<ul id="userList"></ul>
<script src="script.js"></script>
</body>
</html>
三、数据准备
接下来，我们在 script.js 文件中准备一些用户数据，并实现搜索功能。
const users = [
{ name: '张三', gender: '男', age: 25, email: 'zhangsan@example.com' },
{ name: '李四', gender: '女', age: 30, email: 'lisi@example.com' },
{ name: '王五', gender: '男', age: 22, email: 'wangwu@example.com' },
{ name: '赵六', gender: '女', age: 28, email: 'zhaoliu@example.com' },
];
document.getElementById('searchButton').addEventListener('click', function() {
const name = document.getElementById('name').value.toLowerCase();
const gender = document.getElementById('gender').value;
const minAge = document.getElementById('minAge').value;
const maxAge = document.getElementById('maxAge').value;
const filteredUsers = users.filter(user => {
return (!name || user.name.toLowerCase().includes(name)) &&
(!gender || user.gender === gender) &&
(!minAge || user.age >= minAge) &&
(!maxAge || user.age <= maxAge);
});
displayUsers(filteredUsers);
});
function displayUsers(users) {
const userList = document.getElementById('userList');
userList.innerHTML = '';
if (users.length === 0) {
userList.innerHTML = '<li>没有找到用户</li>';
return;
}
users.forEach(user => {
const li = document.createElement('li');
li.textContent = `姓名: ${user.name}, 性别: ${user.gender}, 年龄: ${user.age}, 邮箱: ${user.email}`;
userList.appendChild(li);
});
}
// 初始化时显示所有用户
displayUsers(users);
四、功能实现细节
- 事件绑定：我们为搜索按钮添加了点击事件监听器，当用户点击时，触发查询。
- 条件过滤：使用 JavaScript 的
filter方法，逐个检查用户数据是否符合用户输入的查询条件。 - 动态展示：根据过滤后的结果更新列表，展示用户信息。
五、总结
通过以上步骤，我们实现了一个简单的多条件查询功能。用户输入条件后，系统会依据这些条件动态筛选和展示用户信息。这一功能可以扩展到更复杂的系统中，配合后端 API 进行数据的实时查询，提供更为丰富和灵活的数据查询体验。希望这个示例能对你的前端开发有所帮助！
