本教程详细介绍了如何使用 javascript 在前端实现动态表格数据搜索功能。通过从 api 获取数据并将其存储在全局变量中，我们利用数组的 `filter()` 方法根据用户输入对数据进行实时过滤，并将匹配的结果动态呈现在 html 表格中，从而实现高效、用户友好的数据检索体验。
在现代 Web 应用中，动态展示和搜索大量数据是常见的需求。当数据来源于远程 API 时，有效管理和过滤这些数据以提升用户体验变得尤为重要。本文将指导您如何利用 JavaScript 实现一个客户端的表格数据搜索功能，具体以 COVID-19 国家的统计数据为例，让用户能够通过输入框实时搜索国家名称并显示匹配结果。
核心思路
实现客户端数据搜索的关键在于以下几点：
- 数据全局存储：从 API 获取的数据应存储在一个全局可访问的变量中，以便在后续的搜索操作中反复使用，而无需每次都重新请求 API。
- 分离展示逻辑：将数据获取与数据展示/过滤的逻辑分离。创建一个独立的函数来负责渲染表格数据，该函数可以接受一个搜索关键词作为参数。
- 利用 filter() 方法：JavaScript 数组的 filter() 方法是实现数据过滤的理想选择。它允许我们根据指定条件筛选数组元素，并返回一个包含所有符合条件的新数组。
- 事件监听：为搜索输入框或搜索按钮添加事件监听器，以便在用户输入或点击时触发数据过滤和表格更新。
HTML 结构准备
首先，我们需要一个包含搜索输入框、搜索按钮以及用于展示数据的 HTML 表格。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态数据搜索</title>
<style>
/* 简单的表格样式，可根据需要自行添加 */
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
input[type="text"], input[type="submit"] {
padding: 8px;
margin-right: 5px;
}
</style>
</head>
<body>
<h1>COVID-19 国家数据搜索</h1>
<!-- 搜索框和搜索按钮 -->
<input type="text" id="myInput" placeholder=" 搜索国家名称 ">
<input type="submit" id="mySubmit" value="搜索" class="submit">
<!-- 数据表格 -->
<table class="table">
<thead>
<tr>
<th scope="col">国家</th>
<th scope="col">新增确诊</th>
<th scope="col">累计确诊</th>
<th scope="col">新增死亡</th>
<th scope="col">累计死亡</th>
<th scope="col">新增恢复</th>
<th scope="col">累计恢复</th>
<th scope="col">最后更新日期</th>
</tr>
</thead>
<tbody id="tbody">
<!-- 数据将通过 JavaScript 动态填充到这里 -->
</tbody>
</table>
<script src="app.js"></script> <!-- 引入您的 JavaScript 文件 -->
</body>
</html>请注意，搜索按钮现在具有 id="mySubmit"，这将在 JavaScript 中用于事件监听。
立即学习“Java免费学习笔记（深入）”；
JavaScript 实现
接下来，我们将编写 JavaScript 代码来处理数据获取、过滤和表格渲染。
1. 数据获取与全局存储
首先，我们需要一个全局变量来存储从 API 获取的原始国家数据。然后，定义一个异步函数 getdata 来从 API 获取数据并初始化表格。
let countriesData = []; // 全局变量，用于存储所有国家数据
/**
* 从 API 获取国家数据并初始化表格
*/
const getdata = async () => {
const endpoint = "https://api.covid19api.com/summary";
try {
const response = await fetch(endpoint);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
countriesData = data.Countries; // 将获取到的国家数据存储到全局变量
_DisplayCountries(); // 首次加载时显示所有国家数据
} catch (error) {
console.error("获取数据失败:", error);
// 可以在这里向用户显示错误消息
}
};
// 调用函数以获取并显示数据
getdata();2. 数据展示与过滤函数
创建一个名为 _DisplayCountries 的函数，它负责清空表格并根据传入的搜索关键词重新渲染数据。这个函数将被 getdata 调用以进行初始渲染，也会被搜索事件监听器调用以进行过滤后的渲染。
/**
* 根据搜索关键词显示国家数据
* @param {string} searchTerm - 搜索关键词，默认为空字符串表示显示所有数据
*/
const _DisplayCountries = (searchTerm = "") => {
const tbody = document.querySelector("#tbody");
tbody.innerHTML = ``; // 清空表格内容
// 过滤数据：将国家名称和搜索关键词都转为小写，进行不区分大小写的包含匹配
const filteredCountries = countriesData.filter(country =>
country.Country.toLowerCase().includes(searchTerm.toLowerCase())
);
// 遍历过滤后的数据，并将其添加到表格中
filteredCountries.forEach(result => {
tbody.innerHTML += `<tr>
<td>${result.Country}</td>
<td>${result.NewConfirmed}</td>
<td>${result.TotalConfirmed}</td>
<td>${result.NewDeaths}</td>
<td>${result.TotalDeaths}</td>
<td>${result.NewRecovered}</td>
<td>${result.TotalRecovered}</td>
<td>${result.Date}</td>
</tr>`;
});
};在这个函数中，filter() 方法是核心。它会遍历 countriesData 数组中的每一个 country 对象，并检查 country.Country 属性（国家名称）在转换为小写后是否包含 searchTerm（搜索关键词）在转换为小写后的内容。这种处理方式确保了搜索是不区分大小写的。
3. 事件监听
最后，我们需要为搜索按钮添加一个点击事件监听器。当用户点击“搜索”按钮时，我们将获取输入框中的值，并将其作为参数传递给 _DisplayCountries 函数。
document.querySelector("#mySubmit").addEventListener("click", e => {
const searchInput = document.querySelector("#myInput").value;
_DisplayCountries(searchInput); // 调用显示函数，传入搜索关键词
});完整代码示例 (app.js)
将上述 JavaScript 片段整合到一个 app.js 文件中：
let countriesData = []; // 全局变量，用于存储所有国家数据
/**
* 从 API 获取国家数据并初始化表格
*/
const getdata = async () => {
const endpoint = "https://api.covid19api.com/summary";
try {
const response = await fetch(endpoint);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
countriesData = data.Countries; // 将获取到的国家数据存储到全局变量
_DisplayCountries(); // 首次加载时显示所有国家数据
} catch (error) {
console.error("获取数据失败:", error);
// 可以在这里向用户显示错误消息
}
};
/**
* 根据搜索关键词显示国家数据
* @param {string} searchTerm - 搜索关键词，默认为空字符串表示显示所有数据
*/
const _DisplayCountries = (searchTerm = "") => {
const tbody = document.querySelector("#tbody");
tbody.innerHTML = ``; // 清空表格内容
// 过滤数据：将国家名称和搜索关键词都转为小写，进行不区分大小写的包含匹配
const filteredCountries = countriesData.filter(country =>
country.Country.toLowerCase().includes(searchTerm.toLowerCase())
);
// 遍历过滤后的数据，并将其添加到表格中
filteredCountries.forEach(result => {
tbody.innerHTML += `<tr>
<td>${result.Country}</td>
<td>${result.NewConfirmed}</td>
<td>${result.TotalConfirmed}</td>
<td>${result.NewDeaths}</td>
<td>${result.TotalDeaths}</td>
<td>${result.NewRecovered}</td>
<td>${result.TotalRecovered}</td>
<td>${result.Date}</td>
</tr>`;
});
};
// 页面加载完成后立即获取并显示数据
getdata();
// 为搜索按钮添加点击事件监听器
document.querySelector("#mySubmit").addEventListener("click", e => {
const searchInput = document.querySelector("#myInput").value;
_DisplayCountries(searchInput); // 调用显示函数，传入搜索关键词
});进阶过滤选项
除了使用 includes() 方法进行简单匹配，您还可以使用正则表达式来实现更复杂的过滤逻辑，例如匹配单词的开头、模糊匹配等。
// 使用正则表达式进行不区分大小写的匹配 // let regex = new RegExp(searchTerm, "i"); // "i" 标志表示不区分大小写 // countriesData.filter(country => country.Country.match(regex))
将上述代码替换 _DisplayCountries 函数中的 filter 逻辑，即可实现基于正则表达式的过滤。
注意事项与优化
-
用户体验优化 (防抖/节流)：如果希望在用户输入时实时搜索（而不是点击按钮），可以将事件监听器从 click 改为 input 事件。但为了避免在用户快速输入时频繁触发搜索导致性能问题，建议结合防抖 (debounce) 或节流 (throttle) 技术。
// 示例：使用简单的防抖函数 const debounce = (func, delay) => { let timeout; return function(...args) { const context = this; clearTimeout(timeout); timeout = setTimeout(() => func.apply(context, args), delay); }; }; document.querySelector("#myInput").addEventListener("input", debounce(e => { const searchInput = e.target.value; _DisplayCountries(searchInput); }, 300)); // 300毫秒内没有新输入才触发搜索 -
DOM 操作优化：在处理大量数据时，频繁地修改 innerHTML 可能会导致性能问题。更优化的做法是使用 DocumentFragment 来构建 DOM 结构，然后一次性添加到 tbody 中。
const fragment = document.createDocumentFragment(); filteredCountries.forEach(result => { const tr = document.createElement('tr'); tr.innerHTML = ` <td>${result.Country}</td> <!-- 其他 td 元素 --> `; fragment.appendChild(tr); }); tbody.appendChild(fragment); // 一次性添加 错误处理：在 getdata 函数中添加了 try...catch 块来捕获 API 请求可能出现的错误，并进行相应的处理，例如向用户显示错误信息。
加载状态：在数据加载期间，可以显示一个加载指示器（如“加载中...”文本或旋转图标），提升用户体验。
总结
通过本教程，您已经学会了如何使用 JavaScript 实现客户端表格数据的动态搜索功能。核心在于将 API 数据全局存储，利用 filter() 方法进行数据过滤，并分离数据展示逻辑。结合事件监听和一些优化技巧，您可以构建出高效且用户友好的数据搜索界面。
