18091 sujets

Questions générales et questions de débutants

Barre de recherche sur site web

Pages :
BruChri a écrit :


Merci casper2.
Peut être la bonne modification sur le site de test : http://0coolmsn.free.fr
=> inspecter => Console , maintenant j'ai le message suivant :
a écrit :
Uncaught SyntaxError: Unexpected token '<' script.js:3
au lieu d'avoir "Array et le nombre de ligne"

Bonjour, Même erreur que précédemment. Sait tu faire la différence entre un code HTML et un code JavaScript ? Si non il faudrait suivre une formation.
Pas de balise HTML dans un fichier .js. Les balises HTML sont entre chevrons ouvrant (<) et chevrons fermant (>) soit <form id="searchForm" onsubmit="return false;"> en L3 qui n'a rien à faire dans le fichier .js mais dans le fichier .html.
Bongota à écrit tout son code dans un seul fichier, toi tu le découpes en plusieurs fichiers, donc il faut séparer le HTML du JavaScript si tu veux plusieurs fichiers.

Soit copier/coller le code fournit plus haut dans un seul fichier .html de test.
casper2

Voilà le code que j'utilise (j'ai testé celui de Bongota comme indiqué précédemment)

// charger les données à partir d'un fichier JSON
let data = [];


fetch("data.json")
    .then(reponse => reponse.json())
    .then(jsonData => {
        data = jsonData;
        // console.dir(data)
    })
    .catch(error => console.error("Erreur lors de la récupération des données : ", error));

function displayResults(result){
    const resultsContainer = document.getElementById("results");
    resultsContainer.innerHTML = "";

    if (result.length === 0) {
        resultsContainer.innerHTML = '<p class="no-result">Aucun résultat trouvé</p>';
        return;
    }

    result.forEach(item => {
        const div = document.createElement("div")
        div.classList.add("result-item");
        div.innerText = item;

        resultsContainer.appendChild(div)

        setTimeout(() => {
            div.classList.add("show");
        }, 100)



    })
}

// Ecouteur pour le champs de recherche
document.getElementById("search-input").addEventListener("input", function () {
    let searchValue = this.value.toLowerCase();
    if (searchValue.length === 0) {
        displayResults("")
    } else {


        let filteredData = data.filter(item => item.toLowerCase().includes(searchValue))
        displayResults(filteredData);
    }
})

Modifié par BruChri (29 Sep 2025 - 14:13)
Bongota a écrit :
As-tu bien mis une ID sur "results" dans le html ?


<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="utf-8" />
    <title>Barre de recherche</title>
    <link rel="stylesheet" href="style.css">

    <script src="https://kit.fontawesome.com/11ad80676e.js" crossorigin="anonymous"></script>

</head>
<body>

    <div class="search-container">
            <h1>Moteur de recherche</h1>
            <div class="search-box">
                <input type="text" class="search-input" placeholder="rechercher...">
            <button class="search-btn"><i class="fa-solid fa-magnifying-glass"></i></button>
        </div>
            <div class="results" id="results">
                <!--<p class="no-result">Aucun résultat trouvé</p>-->
                <div class="result-item">
                    Pull
                </div>
                <div class="result-item">
                    Robe
                </div>
                
            </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

Modifié par BruChri (29 Sep 2025 - 14:25)
Bongota a écrit :
As-tu bien mis une ID sur "results" dans le html ?


Voilà mon code Bongota:
 <div class="col-sm-6 offset-sm-2 offset-md-0 col-lg-3">
     <div class="search-box row bg-light p-2 rounded-4">
         <div class="search-box col-11 col-md-7">
             <input type="text" id="search-input" class="form-control border-0 bg-transparent" placeholder="Rechercher un article">
             <button id="search-btn"> <i class="fas fa-search"></i> </button>
         </div>
         <div class="results" id="results">
             <!--<p class="no-result">Aucun résultat trouvé</p>-->
             <div class="result-item">
                 Pull
             </div>
             <div class="result-item">
                 Gilet
             </div>
             <div class="result-item">
                 Cravate
             </div>
         </div>
     </div>
 </div>
Bongota a écrit :
As-tu bien mis une ID sur "results" dans le html ?


 <div class="col-sm-6 offset-sm-2 offset-md-0 col-lg-3">
     <div class="search-box row bg-light p-2 rounded-4">
         <div class="search-box col-11 col-md-7">
             <input type="text" id="search-input" class="form-control border-0 bg-transparent" placeholder="Rechercher un article">
             <button id="search-btn"> <i class="fas fa-search"></i> </button>
         </div>
         <div class="results" id="results">
             <!--<p class="no-result">Aucun résultat trouvé</p>-->
             <div class="result-item">
                 Pull
             </div>
             <div class="result-item">
                 Gilet
             </div>
             <div class="result-item">
                 Cravate
             </div>
         </div>
     </div>
 </div>
casper2 a écrit :

Bonjour, Même erreur que précédemment. Sait tu faire la différence entre un code HTML et un code JavaScript ? Si non il faudrait suivre une formation.
Pas de balise HTML dans un fichier .js. Les balises HTML sont entre chevrons ouvrant (&lt;) et chevrons fermant (&gt;) soit &lt;form id="searchForm" onsubmit="return false;"&gt; en L3 qui n'a rien à faire dans le fichier .js mais dans le fichier .html.
Bongota à écrit tout son code dans un seul fichier, toi tu le découpes en plusieurs fichiers, donc il faut séparer le HTML du JavaScript si tu veux plusieurs fichiers.
Soit copier/coller le code fournit plus haut dans un seul fichier .html de test.

J'ai tout mis dans le html pour les essais, mais je suis en train de créer une aray en JSON qui ira sur chaque page html. L'unique script JS pour tout le site ne renfermera plus d'aray.
Je suis sur les tests, avant de mettre en ligne.
Bongota a écrit :
C'est quoi, ça ?
&lt;div class="results" id="results"&gt;


Tu m'as demandé si j'avais mis une id sur results, c'est une partie de mon code html
Modifié par BruChri (29 Sep 2025 - 14:30)
Bon voilà, la barre de recherche fonctionne enfin sur le site test : http://0coolmsn.free.fr/
Après il faudra voir comment trouver les articles au lieu du texte.
Et cela fonctionne pas sur le site test de Pic & Coud 2.0 : http://0coolteam.free.fr/
Merci d'avance à ceux qui contribue à mes avancés.
Maintenant comment relier tout cela à des articles du site et voir pour les accents du message "Aucun résultat trouvé"
Modifié par BruChri (29 Sep 2025 - 15:20)
Si tu regardes bien mon code, il y a la gestion des majuscule/minuscules, de façon à éviter les erreurs. Il semble que ton filtre est un peu différent du mien. Je trouve qu'il y a trop de réponses proches. Mon filtre en plus possède la complétion. Ce qui fait que si par exemple, j'ai mis :
"tous les chemins mènent à Rome" dans ma base, dès que tu entres le "t", il te propose la phrase entière. Après, quand tu ajoutes des lettres, il transforme la phrase, jusqu'à qu'elle soit entière, mais en passant par des phrases intermédiaires qui ont le "t" en entrée. Ou alors, il met "non trouvé" si la lettre ajoutée ne correspond pas à quelque chose dans ta base.
C'est un peu subtil, je t'avais prévenu que ce filtrage est à travailler. Vingt-huit messages, on va peut-être commencer à travailler ces filtres, avant d'aller plus loin Smiley cligne
Non, "Aucun résultat" s'affiche avec les accents. Ça, c'est un autre problème, pas lié au script. Il faut voir ton encodage html ou sous quel éditeur de texte tu codes. Il faut utiliser l'UTF8.
Prévenir un modérateur
Pages :
Répondre au sujet
Aller à