用Vanilla JavaScript进行页内过滤搜索

在有大量信息的网站上手动搜索文本数据是很困难的，而且很耗时。这个问题可以通过提供一个搜索选项来处理，该选项可以将搜索结果向下过滤，使其更容易被发现和阅读。页内过滤是解决这个问题的一个答案。

本教程将帮助读者了解页内过滤，以及如何使用vanilla脚本来应用它，这是一个不包括任何额外类型库的JavaScript的裸版。

前提条件

要学习本教程，读者应具备以下条件。

对HTML和CSS的基础知识有良好的理解。
具有JavaScript的基本知识。

目标

在本教程结束时，读者将了解以下内容。

理解页面内过滤搜索的概述。
知道如何创建一个样本网页。
知道如何创建一个时间延迟。
理解模糊搜索。
掌握注意事项。

页内过滤搜索的概述

页内过滤--是一种搜索技术，它对网页内容进行过滤，使匹配的结果更容易找到和阅读。在信息量大的网页上更是如此。

JavaScript通过以下方式处理所有的用户互动。

找到用户想要浏览的所有网站信息。
监测用户在搜索框中的输入，过滤可搜索元素的innerText 。
测试文本是否包括搜索词并返回查询结果。

为了跟进，我们将创建一个样本网页来说明这个使用vanilla JavaScript的页内过滤搜索概念。

创建样本网页

为了理解这一点，让我们用下面的代码片断创建一个简单的网页，其中有一个经常问的问题的样本。

<h1>FAQ Section</h1>
<div class="cards">
  <h3>What is Paradise Island?</h3>
  <p>It's where Wonder Woman comes from.</p>
</div>
<div class="cards">
  <h3>Who were Batman's parents?</h3>
  <p>Thomas Wayne and Martha Wayne.</p>
</div>
<div class="cards">
  <h3>What is Kryptonite?</h3>
  <p>It's Superman's weakness</p>
</div>
<div class="cards">
  <h3>What is Eye of Agamotto?</h3>
  <p>It's a place where the Time Stone is hidden in Doctor Strange</p>
</div>
<div class="cards">
  <h3>Learn more</h3>
  <p>Want to learn more about us?</p>
</div>

当来到JavaScript时，我们将使用下面的CSS代码，根据搜索情况添加/删除元素，为交互做准备。

.is_hidden {
  display: none;
}

然后，我们添加一个搜索框和它的事件，当用户试图得到任何搜索结果时，它就会启动。

<label for="searchbox">Search</label>
<input 
  type="search" 
  oninput="Search()" 
  id="searchbox" 
>

然后，我们使用下面的JavaScript代码来执行搜索和过滤操作。

function Search() {
  // Locate the card elements
  let cards = document.querySelectorAll('.cards')
  // Locate the search input
  let search_query = document.getElementById("searchbox").value;
  // Loop through the cards
  for (var i = 0; i < cards.length; i++) {
    // If the text is within the card...
    if(cards[i].innerText.toLowerCase()
      // ...and the text matches the search query...
      .includes(search_query.toLowerCase())) {
        // ...remove the `.is-hidden` class.
        cards[i].classList.remove("is_hidden");
    } else {
      // Otherwise, add the class.
      cards[i].classList.add("is_hidden");
    }
  }
}

上面的代码找到并保存了所有cards 和输入的引用。
当用户发起搜索时，系统会运行所有的cards ，并确定文本是否包含在卡片中。
如果卡片中的文本与搜索查询相匹配，.is_ hidden 类就会被删除，卡片就会被显示出来；如果不匹配，该类就会保留，卡片就会被隐藏。

创建时间延迟

为了确保我们的脚本不会运行太多次而使页面变慢，我们将使用下面的代码在等待几秒钟后才运行我们的Search 函数。

let Timer;        
let Interval = 500; // Half a second
let searchInput = document.getElementById('searchbox');
searchInput.addEventListener('keyup', () => {
  clearTimeout(Timer);
  Timer = setTimeout(Search, Interval);
});

然后我们删除搜索输入上的输入事件。

<label for="searchbox">Search</label>
<input type="search" id="searchbox">

模糊搜索

这些是在使用相关关键词时，返回与完全匹配的结果相同的搜索。这增加了有可能 "匹配 "搜索查询的卡片数量。

这样做有两个选择。

使用一个隐藏的元素

以一个充满关键词的跨度为例。下面的代码将被用来使用隐藏元素。

<div class="cards">
 <h3>What is Paradise Island?</h3>
  <p>It's where Wonder Woman comes from.</p>
  
    <!-- Put any keywords here -->
   <span class="is_hidden">secret</span> 
</div>

注意：为了使上面的代码发挥作用，我们将更新我们的Search 函数，我们将使用.textContent ，而不是.innerText ，以纳入所有隐藏的组件。

for (var i = 0; i < cards.length; i++) {
  if(cards[i].textContent.toLowerCase()
          .includes(search_query.toLowerCase())) {
      cards[i].classList.remove("is_hidden");
  } else {
      cards[i].classList.add("is_hidden");
  }
}

通过一个属性进行搜索

在这里，我们把关键词直接放在属性的值上，如果用户试图在搜索框中输入一个词，这些查询与它包含在属性的值中的内容相匹配。

for (var i = 0; i < cards.length; i++) {
  if(cards[i].getAttribute('alt').toLowerCase()
    .includes(search_query.toLowerCase())) {
      cards[i].classList.remove("is-hidden");
  } else {
    cards[i].classList.add("is-hidden");
  }
}

注意：由于我们想通过alt属性进行搜索，除了页面上真正显示的内容之外，我们必须将innerText 改为getAttribute('alt') ，这样上述方法才能发挥作用。

注意事项

这些方法只有在所有可搜索的内容都在已经渲染的页面的DOM中时才会起作用。

总结

正如我们所看到的，页内过滤在帮助用户方便快捷地搜索网页内容方面起着关键作用。使用vanilla JavaScript，我们已经能够实现上述内容。

总结一下，我们已经。

了解了什么是页内过滤。
如何在vanilla脚本中使用页内过滤的搜索。
如何创建时间延迟以避免页面停机。
了解了模糊搜索和实现它们的各种方法。

如何用Vanilla JavaScript进行页面内过滤搜索