本教程详细介绍了如何使用 javascript 在前端实现动态表格数据搜索功能。通过从 api 获取数据并将其存储在全局变量中，我们利用数组的 `filter()` 方法根据用户输入对数据进行实时过滤，并将匹配的结果动态呈现在 html 表格中，从而实现高效、用户友好的数据检索体验。
在现代 Web 应用中，动态展示和搜索大量数据是常见的需求。当数据来源于远程 API 时，有效管理和过滤这些数据以提升用户体验变得尤为重要。本文将指导您如何利用 JavaScript 实现一个客户端的表格数据搜索功能，具体以 COVID-19 国家的统计数据为例，让用户能够通过输入框实时搜索国家名称并显示匹配结果。
核心思路
实现客户端数据搜索的关键在于以下几点：
数据全局存储：从 API 获取的数据应存储在一个全局可访问的变量中，以便在后续的搜索操作中反复使用，而无需每次都重新请求 API。分离展示逻辑：将数据获取与数据展示/过滤的逻辑分离。创建一个独立的函数来负责渲染表格数据，该函数可以接受一个搜索关键词作为参数。利用 filter() 方法：JavaScript 数组的 filter() 方法是实现数据过滤的理想选择。它允许我们根据指定条件筛选数组元素，并返回一个包含所有符合条件的新数组。事件监听：为搜索输入框或搜索按钮添加事件监听器，以便在用户输入或点击时触发数据过滤和表格更新。
HTML 结构准备
首先，我们需要一个包含搜索输入框、搜索按钮以及用于展示数据的 HTML 表格。
动态数据搜索 /* 简单的表格样式，可根据需要自行添加 */ 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; }COVID-19 国家数据搜索
| 国家 | 新增确诊 | 累计确诊 | 新增死亡 | 累计死亡 | 新增恢复 | 累计恢复 | 最后更新日期 |
|---|
请注意，搜索按钮现在具有 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 += ` ${result.Country} ${result.NewConfirmed} ${result.TotalConfirmed} ${result.NewDeaths} ${result.TotalDeaths} ${result.NewRecovered} ${result.TotalRecovered} ${result.Date} `; });};
在这个函数中，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 += ` ${result.Country} ${result.NewConfirmed} ${result.TotalConfirmed} ${result.NewDeaths} ${result.TotalDeaths} ${result.NewRecovered} ${result.TotalRecovered} ${result.Date} `; });};// 页面加载完成后立即获取并显示数据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 = ` ${result.Country} `; fragment.appendChild(tr);});tbody.appendChild(fragment); // 一次性添加
错误处理：在 getdata 函数中添加了 try…catch 块来捕获 API 请求可能出现的错误，并进行相应的处理，例如向用户显示错误信息。
加载状态：在数据加载期间，可以显示一个加载指示器（如“加载中…”文本或旋转图标），提升用户体验。
总结
通过本教程，您已经学会了如何使用 JavaScript 实现客户端表格数据的动态搜索功能。核心在于将 API 数据全局存储，利用 filter() 方法进行数据过滤，并分离数据展示逻辑。结合事件监听和一些优化技巧，您可以构建出高效且用户友好的数据搜索界面。
以上就是JavaScript 实现动态表格搜索与 API 数据过滤教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1592740.html
微信扫一扫 
支付宝扫一扫 
