使用香草JavaScript的页面内过滤搜索-css教程-PHP中文网

首页

web前端

css教程

使用香草JavaScript的页面内过滤搜索

William Shakespeare

Mar 18, 2025 pm 12:00 PM

使用香草JavaScript的页面内过滤搜索

通过简单的页面搜索功能增强用户在信息丰富的页面上的体验。忘记数据库查询或JSON解析 - 此方法直接搜索网页的渲染文本内容。当存在浏览器内置搜索时，这种方法提供了精致的过滤体验，突出了相关结果，以便于导航。

这是一个现场演示，展示了功能：[链接到演示]

我在一个现实世界中使用了这项技术： https：//www.php.cn/link/2a60eed050799970d61abad679da7aeae8f 。

利用JavaScript

本教程采用JavaScript来管理所有交互式元素。具体而言，它将：

确定可搜索的内容。
监视用户在搜索字段中的输入。
过滤可搜索元素的innerText 。
检查文本是否包含搜索词（ .includes()是此处的键）。
基于搜索术语匹配的切换元素可见性。

基本的HTML结构

让我们假设一个常见问题页面，其中每个问题都作为标题和内容的“卡”提出：

<h1 id="常见问题解答部分">常见问题解答部分</h1>

<div>
  <h3 id="我们是谁">我们是谁</h3>
  <p>它不仅幸存了五个世纪，而且还幸存下来，而且跨越了电子排版，基本上保持不变。它得到了普及</p>
</div>

<div>
  <h3 id="我们做什么">我们做什么</h3>
  <p>它不仅幸存了五个世纪，而且还幸存下来，而且跨越了电子排版，基本上保持不变。它得到了普及</p>
</div>

<div>
  <h3 id="为什么在这里工作">为什么在这里工作</h3>
  <p>它不仅幸存了五个世纪，而且还幸存下来，而且跨越了电子排版，基本上保持不变。它得到了普及</p>
</div>

<div>
  <h3 id="了解更多">了解更多</h3>
  <p>想进一步了解我们吗？</p>
</div>

对于有许多问题的页面，此结构有效地扩展了。

为了启用互动性，我们将使用单个CSS规则：

 。 }

该类将动态添加或删除以控制元素可见性。我们还将添加一个搜索输入：

<label for="searchbox">搜索：</label>
<input type="text" id="searchbox">

核心JavaScript功能

以下JavaScript代码管理搜索功能：

函数livesearch（）{
  让卡= document.queryselectorall（'。cards'）; //选择卡元素
  令searchQuery = document.getElementById（“ searchbox”）。值; //获取搜索词

  cards.foreach（card => {
    令textContent = card.innertext.tolowercase（）; //归一化为小写
    令searchTermlower = searchQuery.tolowercase（）; //归一化为小写

    if（textContent.includes（搜索termlower））{
      card.classlist.remove（'is Hinded'）; //显示匹配卡
    } 别的 {
      card.classlist.add（'is Hinded'）; //隐藏非匹配卡
    }
  }）;
}

//添加少量延迟以防止功能过多的调用
令TypingTimer;
令TypeInterval = 500; //半秒
令searchInput = document.getElementById（'searchbox'）;

SEARCHINPUT.ADDEVENTLISTENER（'keyup'，（）=> {
  ClearTimeOut（typingTimer）;
  typingTimer = settimeout（livesearch，typeinterval）;
}）;

该代码通过卡迭代，检查搜索术语包含（不敏感），并相应地更新可见性。延迟阻止了快速击键的性能问题。

扩展搜索功能：模糊匹配

要合并模糊匹配（即使不明确显示相关的关键字，也要搜索相关的关键字），请考虑使用隐藏的元素或属性：

方法1：隐藏元素

添加包含关键字的隐藏元素：

<div>
  <h3 id="我们是谁">我们是谁</h3>
  <p>...</p>
  <span class="hidden-keywords">秘密，公司，历史</span>
</div>

修改liveSearch包括包含textContent而不是innerText以访问隐藏的关键字。

方法2：属性

使用诸如alt类的属性进行图像：

<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174227042512545.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="使用香草JavaScript的页面内过滤搜索">

调整liveSearch使用getAttribute('alt')搜索属性值。