Accéder au contenu principal

Comment créer un champ de recherche dynamique sur internet simplement avec ton téléphone ?

Date:



Tu souhaites apprendre à créer une fonction de recherche en temps réel ? C’est possible, simple, et très instructif pour tout débutant en développement web. 

Dans cet article, je t'explique comment fonctionne un petit projet que tu peux tester facilement sur ton ordinateur ou sur ton téléphone.

Recherche Dynamique

Recherche en temps réel

    Ce champ de recherche dynamique est conçu avec seulement trois langages :

    HTML pour la structure de la page (barre de recherche, résultats),

    CSS pour l’apparence (design clair, propre et responsive),

    JavaScript pour la logique de recherche en temps réel.

    Voici ce qui se passe : Dès que l’utilisateur commence à taper dans la zone de recherche, JavaScript capte chaque lettre, compare le texte à une liste prédéfinie (comme "Python", "HTML", "CSS"...), puis affiche uniquement les résultats qui correspondent. Tout cela se fait sans recharger la page, ce qui rend l’expérience très fluide.

    Comment le tester ?


    Si tu veux le tester, copie le code complet ci-dessous. Crée un site internet sur blogger ou sur un autre hébergeur comme WordPress, jumla, simplesite, etc. Essai de publier un article et utilise la partie éditeur de html pour coller ce code. Tu verras certainement le même résultat.

    Après avoir publié, consulte le et tape un mot dans la barre de recherche (ex : "py") → tu verras les résultats s’afficher en direct.

    Pas besoin de connexion Internet, ni de serveur. C’est l’un des meilleurs moyens pour s’initier à JavaScript et comprendre comment fonctionnent les interactions sur une page web.


    Comment l’apprendre ?


    Prends le temps de lire chaque partie du code :

    Que fait chaque balise HTML ?

    À quoi sert chaque règle CSS ?

    Comment le JavaScript filtre les résultats ?

    Modifie la liste de mots, change les couleurs, ajoute des animations ! Plus tu expérimente, plus tu progresses.


    Recherche Dynamique avec Code Coloré 

    <!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Recherche Dynamique</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f1f1f1;
      padding: 5px;
      text-align: center;
    }

    .container {
      max-width: 400px;
      margin: auto;
    }

    input[type="text"] {
      width: 80%;
      padding: 10px;
      font-size: 16px;
      margin-bottom: 10px;
    }

    ul {
      list-style-type: none;
      padding: 0;
    }

    li {
      background-color: #fff;
      margin: 5px 0;
      padding: 10px;
      border: 1px solid #ddd;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>Recherche en temps réel</h2>
    <input type="text" id="searchInput" placeholder="Tapez un mot...">
    <ul id="resultsList"></ul>
  </div>

  <script>
    const data = [
      "Python", "JavaScript", "HTML", "CSS", "React",
      "Vue", "Angular", "Node.js", "Bootstrap", "Tailwind", "Daniel Business 44"
    ];

    const input = document.getElementById('searchInput');
    const resultsList = document.getElementById('resultsList');

    input.addEventListener('input', () => {
      const query = input.value.toLowerCase();
      const filtered = data.filter(item => item.toLowerCase().includes(query));

      resultsList.innerHTML = '';
      filtered.forEach(result => {
        const li = document.createElement('li');
        li.textContent = result;
        resultsList.appendChild(li);
      });

      if (filtered.length === 0 && query !== "") {
        const li = document.createElement('li');
        li.textContent = "Aucun résultat trouvé.";
        resultsList.appendChild(li);
      }
    });
  </script>
</body>
</html>

    Commentaires

    Enregistrer un commentaire