JavaScript实现动态搜索过滤与关键词高亮显示-js教程-PHP中文网

JavaScript实现动态搜索过滤与关键词高亮显示

本教程详细介绍了如何利用javascript、html和css构建一个交互式搜索功能。通过实时监听用户输入，该功能能够动态过滤列表项，并对匹配的关键词进行高亮显示，从而显著提升用户在大量数据中查找信息的效率和体验。

引言

在现代Web应用中，为用户提供高效的数据搜索和筛选能力是提升用户体验的关键。本教程将引导您从零开始，使用纯JavaScript、HTML和CSS实现一个功能完善的动态搜索框。该搜索框不仅能根据用户的输入实时过滤列表内容，还能将匹配的文本片段高亮显示，使用户一目了然地找到所需信息。

核心功能概览

我们将实现以下两个主要功能：

实时过滤 (Real-time Filtering)：当用户在搜索框中输入文字时，列表会立即更新，只显示包含输入内容的项。
关键词高亮 (Keyword Highlighting)：在过滤后的列表中，与用户输入匹配的文本部分将被特殊样式（如背景色或加粗）标记出来。

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>

登录后复制

在上述代码中：

立即学习“Java免费学习笔记（深入）”；

<input type="search" id="search-box"> 是我们的搜索输入框。
<ul id="world-universities_list"> 是大学列表的容器。
<li class="university"> 是每个大学的列表项。

CSS 样式设计

为了使高亮效果可见，我们需要定义一个.highlight 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，它定义了匹配文本的背景色和字体粗细。您可以根据设计需求调整这些属性。

JavaScript 逻辑实现

这是实现动态搜索和高亮的核心部分。我们将使用JavaScript来监听用户输入，并根据输入内容操作DOM。

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. 高亮功能：将匹配的文本高亮显示
      // 创建正则表达式，'g'表示全局匹配，'i'表示不区分大小写
      const regex = new RegExp(`(${noWhiteSpaceInput})`, "gi");
      // 使用replace方法将匹配的文本用<span>标签包裹起来
      // $1 是正则表达式中第一个捕获组（即括号内的内容）
      const highlightedText = university.textContent.replace(regex, "<span class='highlight'>$1</span>");
      university.innerHTML = highlightedText; // 更新列表项的HTML内容
    });
  });
};

searchUniversity();

登录后复制

代码详解

获取DOM元素:
- searchBox: 获取ID为search-box的搜索输入框元素。
- universities: 获取所有类名为university的列表项元素。querySelectorAll返回一个NodeList，我们可以像数组一样遍历它。
事件监听:

纳米搜索
纳米搜索：360推出的新一代AI搜索引擎

30

查看详情
- searchBox.addEventListener("keyup", () => { ... });: 当用户在搜索框中按下并释放键盘键时，会触发keyup事件，从而执行我们的搜索逻辑。
标准化输入:
- searchBoxInput = searchBox.value.toLowerCase();: 获取搜索框的当前值，并将其转换为小写，以便进行不区分大小写的匹配。
- noWhiteSpaceInput = searchBoxInput.replace(/\s/g, "");: 移除输入中的所有空格。这样做可以确保用户输入"MIT"和"M I T"都能匹配"Massachusetts Institute of Technology (MIT)"。
- 对每个大学名称也进行同样的处理 (universityName.toLowerCase().replace(/\s/g, ""))，以保证匹配逻辑的一致性。
过滤功能:
- universities.forEach((university) => { ... });: 遍历所有大学列表项。
- if (universityName.includes(noWhiteSpaceInput)): 使用String.prototype.includes()方法检查标准化后的大学名称是否包含标准化后的用户输入。
- university.style.display = "block"; 或 university.style.display = "none";: 根据匹配结果显示或隐藏列表项。
高亮功能:
- const regex = new RegExp((${noWhiteSpaceInput}), "gi");: 创建一个正则表达式。
 - noWhiteSpaceInput 是要匹配的字符串。
 - ( 和 ) 创建一个捕获组，这样我们可以在替换时引用它。
 - g (global) 标志确保替换所有匹配项，而不是只替换第一个。
 - i (case-insensitive) 标志确保匹配不区分大小写。
- const highlightedText = university.textContent.replace(regex, "$1");:
 - university.textContent: 获取列表项的原始文本内容。
 - replace(regex, "$1"): 使用正则表达式替换所有匹配的子字符串。$1是正则表达式中第一个捕获组的内容，即用户输入的匹配部分。这样，匹配的文本就会被标签包裹起来，并应用.highlight样式。
- university.innerHTML = highlightedText;: 将带有高亮标签的新HTML内容赋值给列表项的innerHTML，从而在页面上显示高亮效果。

完整代码示例

为了方便您测试，这里是所有代码的整合：

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态搜索与高亮教程</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
</head>
<body>
    <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>
    <script src="script.js"></script>
</body>
</html>

登录后复制

style.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;
}

登录后复制

script.js

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) => {
      // 存储原始文本内容，用于高亮显示
      const originalText = university.textContent;
      const universityNameProcessed = originalText.toLowerCase().replace(/\s/g, "");

      // 过滤逻辑
      if (universityNameProcessed.includes(noWhiteSpaceInput)) {
        university.style.display = "block";
      } else {
        university.style.display = "none";
      }

      // 高亮逻辑
      // 只有当有搜索输入时才进行高亮
      if (noWhiteSpaceInput.length > 0) {
        const regex = new RegExp(`(${noWhiteSpaceInput})`, "gi");
        const highlightedText = originalText.replace(regex, "<span class='highlight'>$1</span>");
        university.innerHTML = highlightedText;
      } else {
        // 如果搜索框为空，则恢复原始文本，移除所有高亮
        university.innerHTML = originalText;
      }
    });
  });
};

searchUniversity();

登录后复制

注意事项与优化

性能考虑: 对于包含成千上万条数据的列表，每次keyup事件都遍历所有DOM元素并修改innerHTML可能会导致性能问题。
- 防抖 (Debouncing): 可以引入防抖技术，在用户停止输入一段时间后（例如300ms）才执行搜索和高亮逻辑，减少不必要的DOM操作。
- 虚拟列表/分页: 对于超大数据量，考虑使用虚拟列表技术或分页加载，只渲染可见区域的数据。
特殊字符处理: 如果搜索内容可能包含正则表达式的特殊字符（如., *, +, ?等），new RegExp()构造函数需要对这些字符进行转义，以防止它们被解释为正则表达式语法。本教程中noWhiteSpaceInput的简单用法在多数情况下足够，但更严谨的实现应考虑这一点。
无匹配结果提示: 当搜索结果为空时，可以显示一个友好的提示信息（例如"未找到匹配项"），而不是简单地显示一个空白列表。
初始状态: 在script.js中，当noWhiteSpaceInput.length === 0时，我们恢复了innerHTML为原始文本，这确保了当搜索框为空时，所有列表项都显示其原始文本且没有高亮。
可访问性 (Accessibility): 对于屏幕阅读器用户，动态改变innerHTML可能会带来挑战。确保在设计时考虑到Web可访问性标准。

总结

通过本教程，您已经学会了如何使用JavaScript、HTML和CSS构建一个实用的动态搜索和高亮功能。这不仅提升了用户在大型数据集中查找信息的效率，也增强了Web应用的交互性和用户体验。掌握这种技术是现代前端开发中一项重要的技能。您可以基于此基础进行扩展，例如添加排序、筛选、模糊搜索等更高级的功能。

以上就是JavaScript实现动态搜索过滤与关键词高亮显示的详细内容，更多请关注php中文网其它相关文章！