本教程详细介绍了如何使用javascript实现一个动态搜索功能，该功能允许用户在输入框中键入字符时，实时过滤列表项并高亮显示匹配的文本。文章涵盖了html结构、css样式以及核心javascript逻辑，包括事件监听、文本处理、正则匹配和dom操作，旨在帮助开发者构建交互性强的搜索界面。
在现代Web应用中，为用户提供快速、直观的搜索体验至关重要。本文将指导您如何利用纯JavaScript实现一个实时搜索功能，该功能不仅能根据用户输入过滤列表项，还能对匹配的文本进行高亮显示，从而显著提升用户体验。
1. 基础HTML结构
首先，我们需要一个基本的HTML骨架，包含一个搜索输入框和一个用于展示列表项的无序列表。
<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">California Institute of Technology (Caltech)</li>
<li class="university">University of Oxford</li>
<li class="university">University of Cambridge</li>
<li class="university">University of Chicago</li>
<li class="university">ETH Zurich - Swiss Federal Institute of Technology</li>
<li class="university">University of California, Berkeley (UCB)</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">Abdullah Gül University (Turkey)</li>
<li class="university">Abertay University (United Kingdom)</li>
<li class="university">Aberystwyth University (United Kingdom)</li>
<li class="university">Abia State University (Nigeria)</li>
<li class="university">Abilene Christian University (United States)</li>
<li class="university">Adam Mickiewicz University (Poland)</li>
<li class="university">Addis Ababa University (Ethiopia)</li>
<li class="university">Adelphi University (United States)</li>
<li class="university last-u">Princeton University</li>
</ul>
</main>在这个结构中：
- <input type="search" id="search-box"> 是用户输入搜索关键词的文本框。
- <ul id="world-universities_list"> 包含了一系列 <li class="university"> 元素，每个代表一个列表项。
2. 基本CSS样式（可选但推荐）
为了更好的视觉效果，我们可以添加一些基础的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: black; /* 确保高亮文本清晰可见 */
}其中，.highlight 类是关键，它定义了匹配文本的高亮样式。
3. JavaScript核心逻辑
JavaScript部分负责监听用户输入、过滤列表和高亮显示匹配项。
// 获取DOM元素
const searchBox = document.getElementById("search-box");
const universities = document.querySelectorAll(".university"); // 获取所有大学列表项
/**
* 实时搜索并高亮匹配文本的函数
*/
const searchUniversity = () => {
// 监听搜索框的键盘抬起事件
searchBox.addEventListener("keyup", () => {
// 获取搜索框当前值，转换为小写并移除所有空格，以便进行不区分大小写和空格的匹配
const searchBoxInput = searchBox.value.toLowerCase();
const noWhiteSpaceInput = searchBoxInput.replace(/\s/g, "");
// 遍历所有大学列表项
universities.forEach((university) => {
// 获取原始的大学名称（textContent），转换为小写并移除空格
const universityName = university.textContent.toLowerCase().replace(/\s/g, "");
// 步骤1: 过滤列表项的显示/隐藏
// 如果大学名称包含搜索关键词，则显示该列表项；否则隐藏
if (universityName.includes(noWhiteSpaceInput)) {
university.style.display = "block";
} else {
university.style.display = "none";
}
// 步骤2: 高亮显示匹配的文本
// 创建一个正则表达式，用于查找搜索关键词。
// 'g' 标志表示全局匹配（查找所有匹配项而非只第一个）。
// 'i' 标志表示不区分大小写匹配。
// `(${noWhiteSpaceInput})` 创建一个捕获组，以便在替换时引用匹配到的文本。
const regex = new RegExp(`(${noWhiteSpaceInput})`, "gi");
// 将原始文本中的匹配项替换为带有高亮样式的<span>标签
// $1 代表正则表达式中第一个捕获组（即匹配到的搜索关键词本身）
const highlightedText = university.textContent.replace(regex, "<span class='highlight'>$1</span>");
// 更新列表项的HTML内容。
// 注意：这里使用innerHTML会替换掉原始的文本内容。
// 在每次搜索时，我们都基于原始的 university.textContent 进行替换，
// 而不是基于已经高亮过的innerHTML，这样可以避免重复嵌套高亮标签。
university.innerHTML = highlightedText;
});
});
};
// 调用函数，启动搜索功能
searchUniversity();4. 代码解析与注意事项
-
DOM元素获取:
- document.getElementById("search-box") 获取搜索输入框。
- document.querySelectorAll(".university") 获取所有带有 university 类的列表项。querySelectorAll 返回一个 NodeList，我们可以像数组一样对其进行 forEach 遍历。
-
事件监听:
- searchBox.addEventListener("keyup", ...) 监听搜索框的 keyup 事件。这意味着每次用户按下并松开键盘上的键时，都会触发搜索逻辑。这种方式提供了实时的反馈。
-
文本处理:
- searchBox.value.toLowerCase(): 将用户输入转换为小写，实现不区分大小写的搜索。
- .replace(/\s/g, ""): 移除输入和列表项文本中的所有空格。这允许用户输入“MIT”或“M I T”都能匹配“Massachusetts Institute of Technology”。
-
列表项过滤:
- universityName.includes(noWhiteSpaceInput): 检查列表项的文本内容是否包含用户输入的关键词。
- university.style.display = "block" 或 "none": 根据匹配结果显示或隐藏列表项。
-
文本高亮:
- new RegExp(pattern, flags): 创建一个正则表达式对象。
- pattern: (${noWhiteSpaceInput}) 动态构建模式。() 创建一个捕获组，用于在替换时引用匹配到的文本。
- flags: "gi"
- g (global): 查找所有匹配项，而不仅仅是第一个。
- i (case-insensitive): 不区分大小写匹配。
- university.textContent.replace(regex, "<span class='highlight'>$1</span>"): 这是高亮的关键步骤。
- 我们使用列表项的原始 textContent 进行替换，而不是其当前的 innerHTML。这样做是为了避免在多次搜索时，高亮 <span> 标签被重复嵌套或导致意外行为。每次搜索时，我们都从“干净”的原始文本开始重新高亮。
- $1 是一个特殊的替换模式，它引用了正则表达式中第一个捕获组匹配到的内容，即用户输入的关键词。
- new RegExp(pattern, flags): 创建一个正则表达式对象。
-
性能考虑:
- 对于非常大的列表，每次 keyup 事件都遍历所有DOM元素并修改 innerHTML 可能会有性能开销。
- 优化建议: 可以考虑使用防抖 (debounce) 技术，限制 keyup 事件触发搜索逻辑的频率，例如在用户停止输入500毫秒后才执行搜索。
5. 总结
通过上述HTML、CSS和JavaScript代码，我们成功实现了一个功能完善的实时搜索和高亮显示组件。这个组件能够：
- 根据用户输入动态过滤列表项。
- 不区分大小写和空格进行匹配。
- 高亮显示列表项中所有匹配的文本片段。
- 提供流畅的用户体验。
您可以将此代码集成到您的项目中，并根据需要调整样式和功能，例如添加加载状态、处理空搜索结果等。理解其背后的原理将帮助您构建更复杂和交互性更强的Web应用。
