JavaScript实现列表搜索过滤与高亮显示教程_技术教程

本教程详细介绍了如何使用javascript实现一个动态搜索功能，该功能允许用户在输入框中键入字符时，实时过滤列表项并高亮显示匹配的文本。文章涵盖了html结构、css样式以及核心javascript逻辑，包括事件监听、文本处理、正则匹配和dom操作，旨在帮助开发者构建交互性强的搜索界面。

在现代Web应用中，为用户提供快速、直观的搜索体验至关重要。本文将指导您如何利用纯JavaScript实现一个实时搜索功能，该功能不仅能根据用户输入过滤列表项，还能对匹配的文本进行高亮显示，从而显著提升用户体验。

1. 基础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

在这个结构中：

是用户输入搜索关键词的文本框。

元素，每个代表一个列表项。

2. 基本CSS样式（可选但推荐）

为了更好的视觉效果，我们可以添加一些基础的CSS样式，并定义一个用于高亮匹配文本的样式。

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");

      // 将原始文本中的匹配项替换为带有高亮样式的标签
      // $1 代表正则表达式中第一个捕获组（即匹配到的搜索关键词本身）
      const highlightedText = university.textContent.replace(regex, "$1");

      // 更新列表项的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, "$1"): 这是高亮的关键步骤。
  - 我们使用列表项的原始 textContent 进行替换，而不是其当前的 innerHTML。这样做是为了避免在多次搜索时，高亮标签被重复嵌套或导致意外行为。每次搜索时，我们都从“干净”的原始文本开始重新高亮。
  - $1 是一个特殊的替换模式，它引用了正则表达式中第一个捕获组匹配到的内容，即用户输入的关键词。
性能考虑:
- 对于非常大的列表，每次 keyup 事件都遍历所有DOM元素并修改 innerHTML 可能会有性能开销。
- 优化建议: 可以考虑使用防抖 (debounce) 技术，限制 keyup 事件触发搜索逻辑的频率，例如在用户停止输入500毫秒后才执行搜索。