本教程详细介绍了如何使用 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() 方法进行数据过滤，并分离数据展示逻辑。结合事件监听和一些优化技巧，您可以构建出高效且用户友好的数据搜索界面。