本文详细介绍了如何利用javascript、html和css实现一个动态搜索功能。该功能允许用户在输入框中键入关键词时，实时过滤列表项并高亮显示所有匹配的文本片段，无论其在字符串中的位置如何，从而提升用户体验和数据可读性。
前言
在现代Web应用中，提供高效的数据检索和展示是提升用户体验的关键。当面对大量列表数据时，一个实时的搜索过滤和关键词高亮功能显得尤为重要。本文将指导您如何使用纯JavaScript结合HTML和CSS，构建一个能够根据用户输入动态过滤列表内容，并对匹配项进行高亮显示的交互式组件。
核心功能概述
我们将实现以下两个主要功能：
实时过滤列表： 用户在搜索框中输入内容时，列表会立即更新，只显示包含输入关键词的项。关键词高亮： 匹配的关键词（无论其在字符串中的位置）将在列表中以特定样式突出显示。
HTML 结构搭建
首先，我们需要一个基本的HTML结构，包括一个搜索输入框和包含待搜索数据的无序列表。
全球顶尖大学列表
- Massachusetts Institute of Technology (MIT)
- Stanford University
- Harvard University
- California Institute of Technology (Caltech)
- University of Oxford
- University of Cambridge
- University of Chicago
- ETH Zurich - Swiss Federal Institute of Technology
- University of California, Berkeley (UCB)
- Aalborg University (Denmark)
- Aalto University (Finland)
- Aarhus University (Denmark)
- Abdullah Gül University (Turkey)
- Abertay University (United Kingdom)
- Aberystwyth University (United Kingdom)
- Abia State University (Nigeria)
- Abilene Christian University (United States)
- Adam Mickiewicz University (Poland)
- Addis Ababa University (Ethiopia)
- Adelphi University (United States)
- Princeton University
search-box：这是我们的搜索输入框，用户将在此键入查询。world-universities_list：包含所有大学名称的无序列表。university：每个 元素都带有一个 university 类，方便JavaScript进行选择和操作。
CSS 样式美化
为了使搜索结果中的匹配文本突出显示，我们需要定义一个高亮样式。此外，我们还可以为整体布局和搜索框添加一些基础样式。
立即学习“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-family: 'Poppins', sans-serif; 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;}.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: 2rem;}.highlight { background-color: aqua; /* 高亮背景色 */ font-weight: bold; /* 字体加粗 */ color: #333; /* 调整高亮文本颜色，使其更清晰 */}
.highlight 类是实现高亮效果的关键。当JavaScript找到匹配的文本时，会为其添加这个类。您可以根据需要调整 background-color 和 color。
JavaScript 逻辑实现
JavaScript部分是实现动态搜索和高亮的核心。我们将监听搜索框的 keyup 事件，并在每次用户输入时执行过滤和高亮操作。
const searchBox = document.getElementById("search-box");const universities = document.querySelectorAll(".university");const searchUniversity = () => { searchBox.addEventListener("keyup", () => { // 1. 获取并处理搜索框输入 const searchBoxInput = searchBox.value.toLowerCase(); // 转换为小写 const noWhiteSpaceInput = searchBoxInput.replace(/s/g, ""); // 移除所有空格 universities.forEach((university) => { const universityName = university.textContent.toLowerCase().replace(/s/g, ""); // 获取大学名称并处理 // 2. 过滤列表项的可见性 if (universityName.includes(noWhiteSpaceInput)) { university.style.display = "block"; // 显示匹配项 } else { university.style.display = "none"; // 隐藏不匹配项 } // 3. 高亮匹配文本 // 创建一个正则表达式，用于查找所有匹配的关键词，不区分大小写 const regex = new RegExp(`(${noWhiteSpaceInput})`, "gi"); // 使用 replace 方法将匹配的关键词替换为带有 highlight 类的 span 标签 // $1 是对正则表达式中第一个捕获组（即 `(${noWhiteSpaceInput})`）的引用 const highlightedText = university.textContent.replace(regex, "$1"); university.innerHTML = highlightedText; // 更新列表项的HTML内容 }); });};searchUniversity();
代码解析
获取DOM元素：
searchBox：通过ID获取搜索输入框。universities：通过类名获取所有大学列表项。
事件监听：
searchBox.addEventListener(“keyup”, …)：当用户在搜索框中每次松开按键时，都会触发此事件监听器中的函数。
处理搜索输入：
searchBox.value.toLowerCase()：获取搜索框的当前值，并将其转换为小写，以实现不区分大小写的搜索。replace(/s/g, “”)：移除输入字符串中的所有空格。这样做可以确保用户输入“University of Oxford”或“universityofoxford”都能匹配。
遍历列表项：
universities.forEach((university) => { … })：迭代所有大学列表项。
过滤可见性：
universityName.includes(noWhiteSpaceInput)：检查大学名称（也经过小写和空格处理）是否包含处理后的搜索输入。university.style.display = “block” 或 “none”：根据匹配结果显示或隐藏列表项。
高亮匹配文本：
new RegExp((${noWhiteSpaceInput}), “gi”)：创建一个正则表达式对象。模板字符串 (${noWhiteSpaceInput}) 将搜索输入作为捕获组。g 标志表示全局匹配，查找所有匹配项而不是只找第一个。i 标志表示不区分大小写匹配。university.textContent.replace(regex, “$1”)：使用 replace() 方法将所有匹配正则表达式的部分替换为带有 标签的文本。$1 是一个特殊的替换模式，它代表正则表达式中第一个捕获组（即 noWhiteSpaceInput）所匹配到的内容。这样，我们就能将实际匹配到的文本包裹在高亮标签中。university.innerHTML = highlightedText：将更新后的HTML内容赋值回列表项，从而在页面上显示高亮效果。
注意事项
性能优化： 对于非常大的列表（数千甚至上万项），频繁的DOM操作可能会影响性能。可以考虑使用虚拟滚动、防抖（debounce）或节流（throttle）技术来优化。安全性： 直接使用 innerHTML 可能会引入跨站脚本攻击（XSS）的风险，如果搜索输入来自不可信的源。在本教程的场景中，搜索输入是用户在本地浏览器中键入的，风险较低。但在处理来自服务器或用户生成的内容时，务必对输入进行适当的净化（sanitization）。用户体验： 可以在搜索框为空时清除所有高亮，并显示所有列表项。CSS样式： 确保 .highlight 类的样式足够醒目，但又不会与页面整体设计冲突。
总结
通过结合简单的HTML结构、基础CSS样式和强大的JavaScript逻辑，我们成功实现了一个动态的搜索过滤和文本高亮功能。这个功能不仅提升了用户在大型数据集中查找信息的效率，也通过直观的高亮反馈增强了用户体验。您可以根据自己的项目需求，在此基础上进行扩展和优化，例如添加搜索结果计数、支持多关键词搜索等。
以上就是使用JavaScript实现动态搜索过滤与文本高亮显示的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1532166.html
微信扫一扫 
支付宝扫一扫 
