本教程将详细介绍如何使用javascript、html和css构建一个实用的实时搜索功能。用户在搜索框输入内容时，列表项会即时根据输入进行过滤，同时匹配的关键词会在列表中以高亮形式显示，从而提供直观高效的用户体验。文章将涵盖html结构搭建、css样式美化以及javascript核心逻辑实现，包括dom操作、事件监听、文本处理和正则表达式高亮技术。
在现代Web应用中，为长列表或数据集合提供高效的搜索功能是提升用户体验的关键。本文将指导您一步步构建一个实时搜索过滤器，该过滤器不仅能根据用户输入动态隐藏或显示列表项，还能将匹配的文本片段高亮显示，即使匹配项不在字符串的开头或结尾。
1. HTML结构：基础骨架
首先，我们需要一个包含搜索输入框和待过滤列表的HTML结构。搜索框用于接收用户的查询，而无序列表（
）将承载我们的数据项。
全球顶尖大学列表
- Massachusetts Institute of Technology (MIT)
- Stanford University
- Harvard University
- University of Oxford
- University of Cambridge
- Aalborg University (Denmark)
- Aalto University (Finland)
- Aarhus University (Denmark)
- Princeton University
关键元素说明：
input 标签：type=”search” 表明这是一个搜索输入框，id=”search-box” 将用于JavaScript中获取该元素。ul 标签：id=”world-universities_list” 用于JavaScript中获取列表容器。li 标签：每个列表项都带有 class=”university”，方便JavaScript选择所有大学列表项。
2. CSS样式：美化与高亮定义
为了让页面看起来更专业，并定义高亮文本的样式，我们需要添加一些CSS规则。其中最重要的是 .highlight 类的定义，它将决定匹配文本的视觉效果。
立即学习“Java免费学习笔记（深入）”；
body { margin: 0; padding: 0; font-family: 'Poppins', sans-serif; /* 示例字体 */}*, *::before, ::after { padding: 0; margin: 0; box-sizing: border-box;}ul { list-style-type: none; padding: 0; margin: 0;}main { background-color: rgb(255, 255, 255); margin: 1.5rem; display: flex; flex-direction: column;}.title { text-align: center; color: rgb(221, 4, 58); font-weight: 600; font-size: 2rem; margin-top: 2rem;}.search_box { display: block; width: 100%; height: 2rem; border-radius: 0.5rem; border: 1.5px solid #0000002c; margin-top: 2rem; outline: none; padding: 2px 10px; /* 增加内边距 */}.world-universities_list { background-color: rgb(104, 7, 39); color: white; padding: 1.5rem; border-radius: 1rem; margin-top: 3rem;}.university:not(.last-u) { margin-bottom: 1rem; /* 调整间距 */}/* 核心高亮样式 */.highlight { background-color: aqua; /* 高亮背景色 */ color: #333; /* 高亮文本颜色，与背景形成对比 */ font-weight: bold; /* 加粗 */ padding: 2px 4px; /* 增加高亮区域的可读性 */ border-radius: 3px;}
关键样式说明：
.highlight 类：这是用于包裹匹配文本的 标签的样式。我们设置了 background-color 为 aqua 和 font-weight: bold 来使其突出显示。您可以根据自己的设计需求调整这些属性。其他样式：为 body, main, title, search_box, ul, li 等元素提供了基础布局和视觉美化。
3. JavaScript逻辑：实现实时搜索与高亮
JavaScript是实现核心功能的关键。我们将监听搜索框的输入事件，然后根据输入内容过滤列表并高亮匹配项。
// 1. 获取DOM元素const searchBox = document.getElementById("search-box");const universities = document.querySelectorAll(".university"); // 获取所有大学列表项// 2. 定义搜索函数const searchUniversity = () => { // 监听搜索框的键盘抬起事件 searchBox.addEventListener("keyup", () => { // 获取搜索框当前值，转换为小写并移除空格，便于进行不区分大小写和空格的匹配 const searchBoxInput = searchBox.value.toLowerCase(); const noWhiteSpaceInput = searchBoxInput.replace(/s/g, ""); // 遍历所有大学列表项 universities.forEach((university) => { // 获取大学名称，转换为小写并移除空格 const universityName = university.textContent.toLowerCase().replace(/s/g, ""); // 原始大学名称，用于高亮显示时保留原始格式 const originalUniversityText = university.textContent; // 3. 列表过滤逻辑 if (universityName.includes(noWhiteSpaceInput)) { university.style.display = "block"; // 显示匹配的列表项 } else { university.style.display = "none"; // 隐藏不匹配的列表项 } // 4. 关键词高亮逻辑 // 只有当搜索框有输入时才进行高亮 if (noWhiteSpaceInput) { // 创建正则表达式，用于查找所有匹配的关键词（不区分大小写，全局匹配） // `(${noWhiteSpaceInput})` 创建一个捕获组，以便在替换时使用 `$1` 引用匹配到的文本 const regex = new RegExp(`(${noWhiteSpaceInput})`, "gi"); // 使用 replace 方法将匹配到的文本包裹在 标签中 const highlightedText = originalUniversityText.replace(regex, "$1"); university.innerHTML = highlightedText; // 更新列表项的HTML内容 } else { // 如果搜索框为空，则恢复列表项的原始文本，移除高亮 university.innerHTML = originalUniversityText; } }); });};// 5. 调用搜索函数，启动功能searchUniversity();
JavaScript代码详解：
获取DOM元素：searchBox: 通过 id 获取搜索输入框。universities: 通过 class 获取所有 列表项，返回一个 NodeList。事件监听：searchBox.addEventListener(“keyup”, …)：当用户在搜索框输入并抬起键盘时，会触发回调函数。keyup 事件比 input 事件在某些场景下更稳定，但 input 事件也能达到类似效果。文本处理：searchBox.value.toLowerCase().replace(/s/g, “”)：将用户输入转换为小写并移除所有空格。这样做是为了实现不区分大小写和不区分空格的模糊匹配，例如，搜索 “mit” 可以匹配 “Massachusetts Institute of Technology”，搜索 “massachusetts institute” 也能匹配 “Massachusetts Institute of Technology”。university.textContent.toLowerCase().replace(/s/g, “”)：对每个列表项的文本内容也进行同样的处理，以便进行公平的比较。originalUniversityText: 保存列表项的原始文本内容，这在清空搜索框时恢复列表项的原始显示非常重要。列表过滤：universityName.includes(noWhiteSpaceInput)：检查处理后的大学名称是否包含处理后的搜索输入。university.style.display = “block” 或 “none”：根据匹配结果显示或隐藏列表项。关键词高亮：if (noWhiteSpaceInput)：只有当搜索框有实际输入时才进行高亮处理，避免空输入时错误地替换内容。new RegExp(pattern, flags)：创建一个正则表达式对象。pattern: (${noWhiteSpaceInput})，这里的 noWhiteSpaceInput 是用户输入的搜索词。括号 () 创建了一个捕获组，这意味着匹配到的文本会被“捕获”下来。flags: gi。g 表示全局匹配（找到所有匹配项，而不是只找到第一个）；i 表示不区分大小写匹配。originalUniversityText.replace(regex, “$1”)：这是高亮的核心。replace() 方法使用正则表达式 regex 查找所有匹配的子字符串，并将它们替换为 $1。$1 是对正则表达式中第一个捕获组（即我们搜索的关键词本身）的引用。university.innerHTML = highlightedText：将包含高亮 标签的新HTML内容赋值给列表项，从而在页面上显示高亮效果。else { university.innerHTML = originalUniversityText; }：如果搜索框为空，则将列表项的HTML内容恢复为其原始文本，移除所有高亮。启动功能：searchUniversity()：在脚本加载完成后调用此函数，激活搜索功能。
4. 注意事项与优化
性能优化： 对于非常大的列表（例如，数千个列表项），频繁的DOM操作可能会导致性能问题。可以考虑使用 去抖 (Debounce) 或 节流 (Throttle) 技术来限制 keyup 事件的触发频率，从而减少不必要的计算和DOM更新。用户体验：在搜索框中添加 placeholder 属性，提供搜索提示。考虑在没有匹配结果时显示一条“未找到结果”的消息。清除搜索框内容时，确保所有列表项都恢复显示且高亮被移除。XSS 安全： 在本例中，我们是替换列表项的 innerHTML，并且替换的内容是用户输入与原始文本的组合。如果原始文本来自不受信任的源，并且用户输入被恶意构造，理论上可能存在XSS风险。但在这种特定的场景下（用户输入用于匹配和高亮，而不是直接插入到HTML中），风险相对较低。如果您的应用需要将用户输入直接渲染到DOM中，务必进行严格的输入清理和验证。可访问性： 对于屏幕阅读器用户，高亮效果可能无法直接感知。可以考虑使用 aria-live 区域来宣布搜索结果的变化。
5. 总结
通过结合HTML的结构化能力、CSS的样式定义以及JavaScript的动态交互，我们成功实现了一个功能完善的实时搜索过滤与关键词高亮功能。这个模式在各种Web应用中都非常常见，例如产品列表、联系人目录或文档搜索等。理解并掌握这种实现方式，将极大地提升您构建用户友好型Web界面的能力。通过进一步的优化和扩展，您可以根据具体需求定制出更强大、更高效的搜索解决方案。
以上就是JavaScript实现列表实时搜索过滤与关键词高亮显示的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1532118.html
微信扫一扫 
支付宝扫一扫 
