使用 JavaScript 构建搜索过滤器

标记

使用 JavaScript 显示数据

使列表可过滤

最初发布在我的博客上

在本教程中，我们将仅使用 JavaScript 构建一个搜索过滤器。这是一个很酷的功能，可以在不重新加载页面的情况下过滤列表。

标记

对于这篇快速文章，我将使用Taildwind CSS，以免浪费您的时间进行样式设计。

那么，我们现在可以从 HTML 部分开始。它相对简单。

在index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
    <title>Filterable List</title>
  </head>

  <body class="antialiased font-sans bg-gray-200">
    <main class="container m-auto max-w-2xl mt-4 p-2 sm:px-8">
      <input type="search" id="search" placeholder="Filter users..." class="appearance-none border border-gray-400 border-b block pl-8 pr-6 py-2 w-full bg-white text-sm placeholder-gray-400 rounded-lg text-gray-700 focus:bg-white focus:placeholder-gray-600 focus:text-gray-700 focus:outline-none" />     
      <div class="my-4 shadow rounded-lg overflow-hidden">
        <table class="items min-w-full leading-normal"></table>
      </div>
    </main>
    <script src="app.js"></script>
  </body>
</html>

不要让 Tailwind CSS 添加的一堆类让您感到困惑。

这里，有两件重要的事情需要保留：

search标签上保存的idinput将帮助我们稍后获取用户输入的值并使用它来过滤列表。
items标签上保存的类table稍后将用于通过 JavaScript 附加数据。

现在，让我们继续并显示数据。

使用 JavaScript 显示数据

对于数据，我将使用github API来获取用户及其头像、存储库等。

items我们通过选择、和来启动 JavaScript 部分search。然后，我们声明一个users数组，正如您可能猜到的那样，它将保存我们的用户。

在app.js

const items = document.querySelector(".items");
const searchUser = document.querySelector('#search');
let users = []

const fetchImages = () => {
  fetch("https://api.github.com/users")
    .then(res => { res.json()
      .then(res => {
          users = res;
          showUsers(users)
      })
      .catch(err => console.log(err));
    })
    .catch(err => console.log(err));
};

const showUsers = (arr) => {
  let output = "";

arr.forEach(({ login, avatar_url}) => (output += `
<tr>
  <td class="py-2 pl-5 border-b border-gray-200 bg-white">
  <div class="flex items-center">
    <div class="flex-shrink-0 w-10 h-10">
      <img class="w-full h-full rounded-full" src=${avatar_url} />
    </div>
    <div class="ml-3">
      <h1 class="capitalize font-semibold text-base text-gray-900 whitespace-no-wrap">
      ${login}
      </h1>
    </div>
  </div>
  </td>
  <td class="py-2 text-center border-b border-gray-200 bg-white text-sm">
    <a class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 border border-blue-700 rounded" 
      href=https://github.com/${login}>See profile
    </a>
  </td>
</tr>
`));
  items.innerHTML = output;
}
document.addEventListener("DOMContentLoaded", fetchImages);

然后，我们使用 Fetch API 获取数据并将其分配给变量users。

有了它，我们现在可以使用该showUsers()功能将它们显示在屏幕上。

对于该showUsers()方法，我们只需循环遍历数据数组并为每个用户显示login及其avatar_url。

现在，数据已成功显示在屏幕上。但是，我们仍然无法使用搜索过滤器。
因此，让我们在下一节中使其可过滤。

使列表可过滤

正如您在本文前面所见，该函数showUsers()帮助我们显示数据。当搜索栏发生变化时，该方法将再次被调用。

在app.js

searchUser.addEventListener('input', e => {
  const element = e.target.value.toLowerCase()
  const newUser = users
    .filter(user => user.login
    .toLowerCase()
    .includes(element))

    showUsers(newUser)
})

这里我们使用了searchUserinput 标签的 id 来监听事件input。也就是说，当用户在搜索栏上输入内容时，这个函数就会被调用。

然后，我们存储输入的值element并将其转换为小写，以便能够正确匹配用户。

为了过滤列表，我们检查输入的值是否与数组中的元素匹配。然后，我们将过滤后的数组传递给进行显示showUsers()。

就是这样，我们有了搜索过滤器。

感谢您的阅读。

您可以在此处找到源代码。

叽叽喳喳	博客	通讯	GitHub	领英	CODEPEN	开发

文章来源：https://dev.to/ibrahima92/build-a-search-filter-with-javascript-2d5

使用 JavaScript 标记构建搜索过滤器 使用 JavaScript 显示数据 使列表可过滤

使用 JavaScript 构建搜索过滤器

标记

使用 JavaScript 显示数据

使列表可过滤

标记

使用 JavaScript 显示数据

使列表可过滤

使用 JavaScript 标记构建搜索过滤器使用 JavaScript 显示数据使列表可过滤