本教程将详细介绍如何使用javascript、html和css构建一个实用的实时搜索功能。用户在搜索框输入内容时，列表项会即时根据输入进行过滤，同时匹配的关键词会在列表中以高亮形式显示，从而提供直观高效的用户体验。文章将涵盖html结构搭建、css样式美化以及javascript核心逻辑实现，包括dom操作、事件监听、文本处理和正则表达式高亮技术。
在现代Web应用中，为长列表或数据集合提供高效的搜索功能是提升用户体验的关键。本文将指导您一步步构建一个实时搜索过滤器，该过滤器不仅能根据用户输入动态隐藏或显示列表项，还能将匹配的文本片段高亮显示，即使匹配项不在字符串的开头或结尾。
1. HTML结构：基础骨架
首先，我们需要一个包含搜索输入框和待过滤列表的HTML结构。搜索框用于接收用户的查询，而无序列表（<ul>）将承载我们的数据项。
<main>
<input
type="search"
name="search_box"
id="search-box"
class="search_box"
placeholder="搜索大学..."
/>
<h1 class="title">全球顶尖大学列表</h1>
<ul class="world-universities_list" id="world-universities_list">
<li class="university">Massachusetts Institute of Technology (MIT)</li>
<li class="university">Stanford University</li>
<li class="university">Harvard University</li>
<li class="university">University of Oxford</li>
<li class="university">University of Cambridge</li>
<li class="university">Aalborg University (Denmark)</li>
<li class="university">Aalto University (Finland)</li>
<li class="university">Aarhus University (Denmark)</li>
<!-- 更多大学列表项 -->
<li class="university last-u">Princeton University</li>
</ul>
</main>关键元素说明：
- 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 类：这是用于包裹匹配文本的 <span> 标签的样式。我们设置了 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 方法将匹配到的文本包裹在 <span class='highlight'> 标签中
const highlightedText = originalUniversityText.replace(regex, "<span class='highlight'>$1</span>");
university.innerHTML = highlightedText; // 更新列表项的HTML内容
} else {
// 如果搜索框为空，则恢复列表项的原始文本，移除高亮
university.innerHTML = originalUniversityText;
}
});
});
};
// 5. 调用搜索函数，启动功能
searchUniversity();JavaScript代码详解：
-
获取DOM元素：
- searchBox: 通过 id 获取搜索输入框。
- universities: 通过 class 获取所有 <li> 列表项，返回一个 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, "<span class='highlight'>$1</span>")：这是高亮的核心。replace() 方法使用正则表达式 regex 查找所有匹配的子字符串，并将它们替换为 <span class='highlight'>$1</span>。$1 是对正则表达式中第一个捕获组（即我们搜索的关键词本身）的引用。
- university.innerHTML = highlightedText：将包含高亮 <span> 标签的新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界面的能力。通过进一步的优化和扩展，您可以根据具体需求定制出更强大、更高效的搜索解决方案。
