Dans ce tutoriel, nous allons créer un filtre de recherche avec JavaScript. C'est une fonctionnalité intéressante qui permet de filtrer une liste sans recharger la page.

Sorry for the interrupt!

If you're interested in learning JavaScript in a comprehensive way, I highly recommend this course: JavaScript - The Complete Guide 2020 (Beginner + Advanced)

It's an affiliate link, so by purchasing, you support the blog at the same time.

Balisage

Pour cet article, j'utiliserai Taildwind CSS pour ne pas vous faire perdre votre temps avec la stylisation.

Nous pouvons maintenant commencer avec la partie HTML qui est relativement simple.

Dans 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>

Ne laissez pas le tas de classes ajoutées par Tailwind CSS vous dérouter.

Ici, il y a deux choses importantes à retenir:

L'id search contenu dans la balise input. Il nous aidera plus tard à obtenir la valeur entrée par l'utilisateur et à filtrer la liste avec.
La classe items contenue dans la balise table qui sera utilisée plus tard pour ajouter les données avec JavaScript.

Nous pouvons maintenant avancer et afficher les données avec JavaScript.

Afficher les données avec JavaScript

Pour les données, j'utiliserai l'API de github pour récupérer les utilisateurs avec leur avatar, leurs repos, etc.

Nous commençons la partie JavaScript en sélectionnant items et search. Ensuite, nous déclarons le tableau users qui, comme vous pouvez le deviner, contiendra nos utilisateurs.

Dans 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)

Ensuite, nous utilisons l'API Fetch pour obtenir les données et les affecter à la variable users.

Avec cela, nous pouvons maintenant utiliser la fonction showUsers() pour les afficher sur l'écran.

Pour la méthode showUsers(), nous parcourons simplement le tableau de données et montrons pour chaque utilisateur le login et son avatar_url.

Nous pouvons maintenant afficher les données à l'écran. Mais, nous ne pouvons toujours pas utiliser le filtre de recherche.

Donc, rendons-le filtrable dans la section suivante.

Rendre la liste filtrable

Comme vous l'avez vu plus tôt dans ce article, la fonction showUsers() nous aide à afficher les données. Et cette méthode sera utilisée à nouveau lorsqu'un changement se produit dans la barre de recherche.

In app.js

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

  showUsers(newUser)
})

Et ici, nous utilisons searchUser (c'est l'id de la balise d'entrée) pour écouter l'événement input. Cela signifie que lorsque l'utilisateur entre quelque chose dans la barre de recherche, cette fonction sera appelée.

Ensuite, nous stockons la valeur entrée sur element et nous le transformons en minuscules pour bien faire correspondre les utilisateurs correctement.

Et pour filtrer la liste, on vérifie si la valeur saisie correspond ou non à un élément du tableau. Ensuite, nous passons le tableau filtré à showUsers().

Et c'est tout, nous avons notre filtre de recherche.

Merci de l'avoir lu

Vous pouvez le voir en direct ici ou trouver le code source ici.

#javascript

Support my work

Buy me a coffee

Get articles in your inbox

Créer un filtre de recherche avec JavaScript

Subscribe to receive the free weekly article