本文旨在解决卡片搜索功能中，当没有匹配结果时，“未找到卡片”提示显示不准确的问题。通过优化javascript逻辑，我们展示了如何首先隐藏所有卡片，然后根据搜索过滤结果来精确显示匹配卡片或“无内容”提示，确保用户体验的准确性和流畅性。
在构建动态网页应用时，搜索过滤功能是常见的需求。例如，在卡片（card）布局中，用户输入搜索词后，页面会实时显示匹配的卡片，并在无匹配项时提示“未找到卡片”。然而，如果JavaScript逻辑处理不当，可能会导致“未找到卡片”的提示在仍有匹配项时错误显示，或在无匹配项时未能及时显示。本教程将详细介绍如何通过改进JavaScript代码，实现一个健壮且用户友好的卡片搜索无结果提示功能。
核心问题分析
原始的JavaScript代码在处理搜索结果时，其主要逻辑是在遍历每张卡片时，如果卡片不匹配搜索条件，就立即显示“未找到内容”的提示。这种逐个判断的方式会导致一个问题：只要循环中有一张卡片不匹配，提示就会被显示，即使其他卡片是匹配的。正确的逻辑应该是，在所有卡片都被检查完毕后，再根据最终的匹配结果来决定是否显示“未找到内容”的提示。
优化后的JavaScript搜索逻辑
为了解决上述问题，我们需要调整JavaScript的执行流程。核心思想是：
在每次搜索开始时，首先隐藏所有卡片。遍历所有卡片，找出所有符合搜索条件的卡片。只显示这些符合条件的卡片。最后，根据符合条件的卡片数量，决定是否显示“未找到内容”的提示。
以下是优化后的JavaScript代码：
function myFunction() { // 获取输入框和“无内容”提示元素 const input = document.getElementById("myFilter"); const noContent = document.getElementById("no-content"); // 获取搜索过滤值，并转换为大写以便进行不区分大小写的匹配 const filter = input.value.toUpperCase(); // 获取卡片容器和所有卡片元素 const cardContainer = document.getElementById("myItems"); // 将HTMLCollection转换为数组，以便使用forEach和filter等数组方法 const cards = Array.from(cardContainer.getElementsByClassName("blog-card")); // 步骤1: 首先隐藏所有卡片 cards.forEach(card => card.style.display = "none"); // 步骤2: 筛选出匹配搜索条件的卡片 const matchingCards = cards.filter( card => card.querySelector(".card-title").innerText.toUpperCase().includes(filter) ); // 步骤3: 显示所有匹配的卡片 matchingCards.forEach(card => card.style.display = "block"); // 步骤4: 根据匹配卡片的数量，决定是否显示“无内容”提示 // 如果没有匹配的卡片，则显示“无内容”提示，否则隐藏 noContent.style.display = (matchingCards.length === 0 ? "flex" : "none");}
HTML结构和初始状态
为了配合JavaScript逻辑，HTML结构需要包含一个搜索输入框、一个卡片容器以及一个用于显示“无内容”提示的元素。其中，“无内容”提示元素应在初始状态下被隐藏。
STORYD
帮你写出让领导满意的精美文稿
164 查看详情
Tips to keep your car running.
Auto Repair
Did you know that in 2021 there were 201,927 active dentists in the United States? That means there is a ratio of approximately 61 dentists per 100,000 people in the country…
there are no more blog post with this term
注意事项：
no-content 元素通过 style=”display: none;” 在HTML中初始化为隐藏状态。JavaScript将根据搜索结果动态控制其显示。onkeyup=”myFunction()” 事件监听器确保每次用户在输入框中输入或删除字符时，搜索功能都会被触发。
CSS样式
CSS样式主要用于美化卡片和搜索框，以及确保“无内容”提示在显示时能够居中且清晰。以下是关键的CSS样式：
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&family=Open+Sans:wght@700&display=swap');/* 输入框容器样式 */.input-container { display: flex; justify-content: center; width: 100%;}.input-container .search-imput { margin: 20px; width: 50%; height: 40px; border-radius: 30px; border: 2px solid #6F77E9;}::placeholder { color: #161663; font-weight: bold; text-align: center; font-size: 1em;}/* 卡片容器样式 */.card-container { display: flex; flex-wrap: wrap; justify-content: center; flex-direction: row; margin: 50px; width: 100%px; /* 注意：此处的px应为单位，例如 100% */}/* 单个卡片样式 */.blog-card { width: 490px; height: 470px; margin: 15px; border-radius: 20px; -webkit-box-shadow: 0px 0px 4px 0px rgba(22, 22, 99, 0.30); box-shadow: 0px 0px 4px 0px rgba(22, 22, 99, 0.30);}/* 卡片内部元素样式 */.blog-card p { font-family: 'Montserrat', sans-serif; margin: 0px; padding: 0px 30px;}.blog-card .blog-card-head img { padding: 20px; width: 92%; border-radius: 30px;}.blog-card .blog-card-head h2 { font-family: 'Open Sans', sans-serif; text-align: center; color: #161663;}.blog-card .blog-card-footer,.blog-card .blog-card-body { display: flex; align-items: center;}.blog-card .blog-card-body { padding: 0px 20px;}.blog-card .blog-card-body img { width: 50px;}.blog-card .blog-card-body h1 { font-family: 'Open Sans', sans-serif; font-size: 20px; color: #161663;}.blog-card .blog-card-footer { padding: 0px 20px;}.blog-card .blog-card-footer a { display: flex; justify-content: center; align-items: center; font-family: 'Montserrat', sans-serif; text-decoration: none;}.blog-card .blog-card-footer img { margin: 10px; width: 30px;}/* 无内容提示区域样式 */.no-content { width: 100vw; height: 50vh; display: flex; /* 使用flex布局方便居中 */ justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */}.no-content h1 { font-size: 20px; padding: 0px 20px; font-family: 'Montserrat', sans-serif; color: #161663;}
总结
通过上述优化，我们实现了一个更加准确和用户友好的卡片搜索功能。关键改进在于将“无内容”提示的显示逻辑从循环内部移到循环之后，并利用现代JavaScript的数组方法（如forEach和filter）来清晰地分离隐藏、筛选和显示卡片的过程。这种方法不仅解决了原始代码中提示显示不准确的问题，也提高了代码的可读性和维护性。在开发动态内容过滤功能时，始终建议采用这种先整体处理、后局部调整的策略，以确保逻辑的正确性和用户体验的流畅性。
以上就是如何在卡片搜索无结果时显示“未找到卡片”提示的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/849042.html
微信扫一扫 
支付宝扫一扫 
