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

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

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

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

利用JavaScript

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

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

基本的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')搜索属性值。

重要说明

此搜索方法仅限于DOM中已经呈现的内容。它不适合搜索外部数据库或大型数据集。

结论

通过香草JavaScript实施的简单而有效的页面搜索解决方案可以显着提高具有广泛内容的网页的可用性。适应并扩展此技术以适合各种应用，从常见问题页面到图像画廊。

以上是使用香草JavaScript的页面内过滤搜索的详细内容。更多信息请关注PHP中文网其他相关文章！