18092 sujets
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)
Modifié par BruChri (29 Sep 2025 - 14:13)
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,:
Voilà le site ou je test ma barre de recherche: http://0coolmsn.free.fr
Modifié par BruChri (29 Sep 2025 - 14:27)
Voilà le site ou je test ma barre de recherche: http://0coolmsn.free.fr
Modifié par BruChri (29 Sep 2025 - 14:27)
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 (<) 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.
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.
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)
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
"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
Bonjour à toute et à tous.
Je souhaite souhaite obtenir l'ouverture de quatre ligne de choix lorsque j'écris une recherche.
Comme ceci :
Cependant je sèche, rien ne s'ouvre.
Mon fichier .html [code=html <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Barre de recherche</title>
<script scr="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js"></script>
<link rel="stylesheet" type="text/css" href="./IndexDesign.css?v=1.0.6">
<script src="https://kit.fontawesome.com/11ad80676e.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="Seach">
<div id="chat-input">
<div id="BarRecherche">
<div id="chat-inputSearch">
<a href="" target="_blank" hidden id="lien"></a>
<div id="sugg">
<textarea id="userInput" rows="1" placeholder="taper votre recherche ou votre message..."></textarea>
<ul id="SuggestionMot"></ul>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" scr="./IndexAction.js?v=1.0.7"></script>
</body>
</html>][/code]
Mon fichier .js
Mon fichier .css
Le site test : http://www.haguecontact.fr
D'avance merci.
Je souhaite souhaite obtenir l'ouverture de quatre ligne de choix lorsque j'écris une recherche.
Comme ceci :
Cependant je sèche, rien ne s'ouvre.
Mon fichier .html [code=html <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Barre de recherche</title>
<script scr="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js"></script>
<link rel="stylesheet" type="text/css" href="./IndexDesign.css?v=1.0.6">
<script src="https://kit.fontawesome.com/11ad80676e.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="Seach">
<div id="chat-input">
<div id="BarRecherche">
<div id="chat-inputSearch">
<a href="" target="_blank" hidden id="lien"></a>
<div id="sugg">
<textarea id="userInput" rows="1" placeholder="taper votre recherche ou votre message..."></textarea>
<ul id="SuggestionMot"></ul>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" scr="./IndexAction.js?v=1.0.7"></script>
</body>
</html>][/code]
Mon fichier .js
const mots = [
{ text: "Mercerie", Views: "1", Categorie: "Mercerie" },
{ text: "Cravate", Views: "1", Categorie: "Cravate" },
{ text: "Buchy", Views: "1", Categorie: "Buchy" },
{ text: "Rouen", Views: "1", Categorie: "Rouen" },
{ text: "Tricot", Views: "1", Categorie: "Tricot" },
{ text: "Couture", Views: "1", Categorie: "Couture" },
{ text: "Pic & Coud 2.0", Views: "1", Categorie: "Pic & Coud 2.0" },
{ text: "laine", Views: "1", Categorie: "mercerie" },
{ text: "tricoter", Views: "1", Categorie: "mercerie" },
{ text: "Bergère", Views: "1", Categorie: "mercerie" },
{ text: "France", Views: "1", Categorie: "mercerie" },
{ text: "Broderie", Views: "1", Categorie: "mercerie" },
{ text: "Retouche", Views: "1", Categorie: "mercerie" },
{ text: "christelle", Views: "1", Categorie: "mercerie" },
{ text: "hague", Views: "1", Categorie: "mercerie" },
{ text: "créations", Views: "1", Categorie: "mercerie" },
{ text: "textile", Views: "1", Categorie: "mercerie" },
{ text: "Tricots", Views: "1", Categorie: "mercerie" },
{ text: "snood", Views: "1", Categorie: "mercerie" },
{ text: "velours", Views: "1", Categorie: "mercerie" },
{ text: "mitaines", Views: "1", Categorie: "mercerie" },
{ text: "etolle", Views: "1", Categorie: "mercerie" },
{ text: "flocon", Views: "1", Categorie: "mercerie" },
{ text: "bonnet", Views: "1", Categorie: "mercerie" },
{ text: "bandeau", Views: "1", Categorie: "mercerie" },
{ text: "cache", Views: "1", Categorie: "mercerie" },
{ text: "oreilles", Views: "1", Categorie: "mercerie" },
{ text: "enfant", Views: "1", Categorie: "mercerie" },
{ text: "pompom", Views: "1", Categorie: "mercerie" },
{ text: "beret", Views: "1", Categorie: "mercerie" },
{ text: "oreille", Views: "1", Categorie: "mercerie" },
{ text: "plaid", Views: "1", Categorie: "mercerie" },
{ text: "toque", Views: "1", Categorie: "mercerie" },
{ text: "russe", Views: "1", Categorie: "mercerie" },
{ text: "tour", Views: "1", Categorie: "mercerie" },
{ text: "cou", Views: "1", Categorie: "mercerie" },
{ text: "bavoir", Views: "1", Categorie: "mercerie" },
{ text: "rond", Views: "1", Categorie: "mercerie" },
{ text: "cape", Views: "1", Categorie: "mercerie" },
{ text: "bain", Views: "1", Categorie: "mercerie" },
{ text: "fils", Views: "1", Categorie: "mercerie" },
{ text: "moulines", Views: "1", Categorie: "mercerie" },
{ text: "cotons", Views: "1", Categorie: "mercerie" },
{ text: "broder", Views: "1", Categorie: "mercerie" },
{ text: "organique", Views: "1", Categorie: "mercerie" },
{ text: "ouvrage", Views: "1", Categorie: "mercerie" },
{ text: "set", Views: "1", Categorie: "mercerie" },
{ text: "grille", Views: "1", Categorie: "mercerie" },
{ text: "magique", Views: "1", Categorie: "mercerie" },
{ text: "doudou", Views: "1", Categorie: "mercerie" },
{ text: "broder", Views: "1", Categorie: "mercerie" },
{ text: "chemin", Views: "1", Categorie: "mercerie" },
{ text: "table", Views: "1", Categorie: "mercerie" },
{ text: "aiguilles", Views: "1", Categorie: "mercerie" },
{ text: "droites", Views: "1", Categorie: "mercerie" },
{ text: "bambou", Views: "1", Categorie: "mercerie" },
{ text: "coffret", Views: "1", Categorie: "mercerie" },
{ text: "cuir", Views: "1", Categorie: "mercerie" },
{ text: "circulaires", Views: "1", Categorie: "mercerie" },
{ text: "tunisien", Views: "1", Categorie: "mercerie" },
{ text: "magasine", Views: "1", Categorie: "mercerie" },
{ text: "catalogue", Views: "1", Categorie: "mercerie" },
{ text: "2024", Views: "1", Categorie: "mercerie" },
{ text: "2025", Views: "1", Categorie: "mercerie" },
{ text: "ecovita", Views: "1", Categorie: "mercerie" },
{ text: "creations", Views: "1", Categorie: "mercerie" },
{ text: "adorable", Views: "1", Categorie: "mercerie" },
{ text: "layette", Views: "1", Categorie: "mercerie" },
{ text: "doudous", Views: "1", Categorie: "mercerie" },
{ text: "doux", Views: "1", Categorie: "mercerie" },
{ text: "amigurumi", Views: "1", Categorie: "mercerie" },
{ text: "noel", Views: "1", Categorie: "mercerie" },
{ text: "animaux", Views: "1", Categorie: "mercerie" },
{ text: "apprendre", Views: "1", Categorie: "mercerie" },
{ text: "brioche", Views: "1", Categorie: "mercerie" },
{ text: "bubble", Views: "1", Categorie: "mercerie" },
{ text: "creative", Views: "1", Categorie: "mercerie" },
{ text: "chale", Views: "1", Categorie: "mercerie" },
{ text: "ajoure", Views: "1", Categorie: "mercerie" },
{ text: "chaussettes", Views: "1", Categorie: "mercerie" },
{ text: "chaussons", Views: "1", Categorie: "mercerie" },
{ text: "jolie", Views: "1", Categorie: "mercerie" },
{ text: "garde", Views: "1", Categorie: "mercerie" },
{ text: "robe", Views: "1", Categorie: "mercerie" },
{ text: "bebe", Views: "1", Categorie: "mercerie" },
{ text: "indispensables", Views: "1", Categorie: "mercerie" },
{ text: "creatif", Views: "1", Categorie: "mercerie" },
{ text: "2023", Views: "1", Categorie: "mercerie" },
{ text: "2024", Views: "1", Categorie: "mercerie" },
{ text: "grand44", Views: "1", Categorie: "mercerie" },
{ text: "petit46", Views: "1", Categorie: "mercerie" },
{ text: "happy", Views: "1", Categorie: "mercerie" },
{ text: "dog", Views: "1", Categorie: "mercerie" },
{ text: "harry_potter", Views: "1", Categorie: "mercerie" },
{ text: "volume1", Views: "1", Categorie: "mercerie" },
{ text: "harry", Views: "1", Categorie: "mercerie" },
{ text: "potter", Views: "1", Categorie: "mercerie" },
{ text: "volume2", Views: "1", Categorie: "mercerie" },
{ text: "homme", Views: "1", Categorie: "mercerie" },
{ text: "machine", Views: "1", Categorie: "mercerie" },
{ text: "coudre", Views: "1", Categorie: "mercerie" },
{ text: "mag", Views: "1", Categorie: "mercerie" },
{ text: "ete", Views: "1", Categorie: "mercerie" },
{ text: "2024", Views: "1", Categorie: "mercerie" },
{ text: "femme", Views: "1", Categorie: "mercerie" },
{ text: "point", Views: "1", Categorie: "mercerie" },
{ text: "pokemon", Views: "1", Categorie: "mercerie" },
{ text: "sac", Views: "1", Categorie: "mercerie" },
{ text: "circulaire", Views: "1", Categorie: "mercerie" },
{ text: "tricotin", Views: "1", Categorie: "mercerie" },
{ text: "geant", Views: "1", Categorie: "mercerie" },
{ text: "apprendre", Views: "1", Categorie: "mercerie" },
{ text: "circulaire", Views: "1", Categorie: "mercerie" },
{ text: "fil", Views: "1", Categorie: "mercerie" },
{ text: "hiver", Views: "1", Categorie: "mercerie" },
{ text: "mag", Views: "1", Categorie: "mercerie" },
{ text: "famille", Views: "1", Categorie: "mercerie" },
{ text: "kids", Views: "1", Categorie: "mercerie" },
{ text: "crochet", Views: "1", Categorie: "mercerie" },
{ text: "week", Views: "1", Categorie: "mercerie" },
{ text: "amis", Views: "1", Categorie: "mercerie" },
{ text: "picapau", Views: "1", Categorie: "mercerie" },
{ text: "chic", Views: "1", Categorie: "mercerie" },
{ text: "raffinee", Views: "1", Categorie: "mercerie" },
{ text: "tricot", Views: "1", Categorie: "mercerie" },
{ text: "modeles", Views: "1", Categorie: "mercerie" },
{ text: "poupee", Views: "1", Categorie: "mercerie" },
{ text: "pomette", Views: "1", Categorie: "mercerie" },
{ text: "chales", Views: "1", Categorie: "mercerie" },
{ text: "etoles", Views: "1", Categorie: "mercerie" },
{ text: "ajoures", Views: "1", Categorie: "mercerie" },
{ text: "chales_etoles_ajoures", Views: "1", Categorie: "mercerie" },
{ text: "tendresse", Views: "1", Categorie: "mercerie" },
{ text: "accessoires", Views: "1", Categorie: "mercerie" },
{ text: "famille", Views: "1", Categorie: "mercerie" },
{ text: "encyclopedie", Views: "1", Categorie: "mercerie" },
{ text: "capsule", Views: "1", Categorie: "mercerie" },
{ text: "incroyable", Views: "1", Categorie: "mercerie" },
{ text: "dmc", Views: "1", Categorie: "mercerie" },
{ text: "cottonbaby", Views: "1", Categorie: "mercerie" },
{ text: "debutant", Views: "1", Categorie: "mercerie" },
{ text: "veggie", Views: "1", Categorie: "mercerie" },
{ text: "bath", Views: "1", Categorie: "mercerie" },
{ text: "nuancier", Views: "1", Categorie: "mercerie" },
{ text: "funny", Views: "1", Categorie: "mercerie" },
{ text: "2026", Views: "1", Categorie: "mercerie" },
{ text: "capsule", Views: "1", Categorie: "mercerie" },
{ text: "septembre", Views: "1", Categorie: "mercerie" },
{ text: "automne", Views: "1", Categorie: "mercerie" },
{ text: "nouveautes", Views: "1", Categorie: "mercerie" },
{ text: "personnalisee", Views: "1", Categorie: "mercerie" },
{ text: "photos", Views: "1", Categorie: "mercerie" },
{ text: "detail", Views: "1", Categorie: "mercerie" },
{ text: "club", Views: "1", Categorie: "mercerie" },
{ text: "sport", Views: "1", Categorie: "mercerie" },
{ text: "dos", Views: "1", Categorie: "mercerie" },
{ text: "personnalise", Views: "1", Categorie: "mercerie" },
{ text: "salamandre", Views: "1", Categorie: "mercerie" },
{ text: "doudoune", Views: "1", Categorie: "mercerie" },
{ text: "brode", Views: "1", Categorie: "mercerie" },
{ text: "essuie_main", Views: "1", Categorie: "mercerie" },
{ text: "essuie", Views: "1", Categorie: "mercerie" },
{ text: "main", Views: "1", Categorie: "mercerie" },
{ text: "fil", Views: "1", Categorie: "mercerie" },
{ text: "coloris", Views: "1", Categorie: "mercerie" },
{ text: "choix", Views: "1", Categorie: "mercerie" },
{ text: "tee_shirt", Views: "1", Categorie: "mercerie" },
{ text: "papa", Views: "1", Categorie: "mercerie" },
{ text: "boudin", Views: "1", Categorie: "mercerie" },
{ text: "porte", Views: "1", Categorie: "mercerie" },
{ text: "brodee", Views: "1", Categorie: "mercerie" },
{ text: "commerce", Views: "1", Categorie: "mercerie" },
{ text: "mi_soquettes", Views: "1", Categorie: "mercerie" },
{ text: "labonal", Views: "1", Categorie: "mercerie" },
{ text: "collants", Views: "1", Categorie: "mercerie" },
{ text: "femmes", Views: "1", Categorie: "mercerie" },
{ text: "labonal", Views: "1", Categorie: "mercerie" },
{ text: "hommes", Views: "1", Categorie: "mercerie" },
{ text: "bas", Views: "1", Categorie: "mercerie" },
{ text: "mi_bas", Views: "1", Categorie: "mercerie" },
{ text: "proteges", Views: "1", Categorie: "mercerie" },
{ text: "pieds", Views: "1", Categorie: "mercerie" },
{ text: "anti_bacterien", Views: "1", Categorie: "mercerie" },
{ text: "anti", Views: "1", Categorie: "mercerie" },
{ text: "bacterien", Views: "1", Categorie: "mercerie" },
{ text: "corbeille", Views: "1", Categorie: "mercerie" },
{ text: "lingettes", Views: "1", Categorie: "mercerie" },
{ text: "divers", Views: "1", Categorie: "mercerie" },
{ text: "types", Views: "1", Categorie: "mercerie" },
{ text: "fer", Views: "1", Categorie: "mercerie" },
{ text: "vapeur", Views: "1", Categorie: "mercerie" },
{ text: "suspendu", Views: "1", Categorie: "mercerie" },
{ text: "singer", Views: "1", Categorie: "mercerie" },
{ text: "mini", Views: "1", Categorie: "mercerie" },
{ text: "couturiere", Views: "1", Categorie: "mercerie" },
{ text: "voyage", Views: "1", Categorie: "mercerie" },
{ text: "reglets", Views: "1", Categorie: "mercerie" },
{ text: "sac", Views: "1", Categorie: "mercerie" },
{ text: "simili", Views: "1", Categorie: "mercerie" },
{ text: "set", Views: "1", Categorie: "mercerie" },
{ text: "rallonge", Views: "1", Categorie: "mercerie" },
{ text: "soutien", Views: "1", Categorie: "mercerie" },
{ text: "gorge", Views: "1", Categorie: "mercerie" },
{ text: "banette", Views: "1", Categorie: "mercerie" },
{ text: "coupon", Views: "1", Categorie: "mercerie" },
{ text: "anime", Views: "1", Categorie: "mercerie" },
{ text: "printemps", Views: "1", Categorie: "mercerie" },
{ text: "eponge", Views: "1", Categorie: "mercerie" },
{ text: "bambou", Views: "1", Categorie: "mercerie" },
{ text: "fermeture", Views: "1", Categorie: "mercerie" },
{ text: "eclair", Views: "1", Categorie: "mercerie" },
{ text: "tailles", Views: "1", Categorie: "mercerie" },
{ text: "serviettes", Views: "1", Categorie: "mercerie" },
{ text: "apero", Views: "1", Categorie: "mercerie" },
{ text: "debardeur", Views: "1", Categorie: "mercerie" },
{ text: "pull", Views: "1", Categorie: "mercerie" },
{ text: "disponible", Views: "1", Categorie: "mercerie" },
{ text: "mohair", Views: "1", Categorie: "mercerie" },
{ text: "col", Views: "1", Categorie: "mercerie" },
{ text: "rond", Views: "1", Categorie: "mercerie" },
{ text: "gilet", Views: "1", Categorie: "mercerie" },
{ text: "capuche", Views: "1", Categorie: "mercerie" },
{ text: "doublee", Views: "1", Categorie: "mercerie" },
{ text: "ferme", Views: "1", Categorie: "mercerie" },
{ text: "boutonniere", Views: "1", Categorie: "mercerie" },
{ text: "rouge", Views: "1", Categorie: "mercerie" },
{ text: "raglan", Views: "1", Categorie: "mercerie" },
{ text: "torsades", Views: "1", Categorie: "mercerie" },
{ text: "classique", Views: "1", Categorie: "mercerie" },
{ text: "net", Views: "1", Categorie: "mercerie" },
{ text: "chic", Views: "1", Categorie: "mercerie" },
{ text: "maya", Views: "1", Categorie: "mercerie" },
{ text: "gris", Views: "1", Categorie: "mercerie" },
{ text: "roule", Views: "1", Categorie: "mercerie" },
{ text: "blanc", Views: "1", Categorie: "mercerie" },
{ text: "festive", Views: "1", Categorie: "mercerie" },
{ text: "ensemble", Views: "1", Categorie: "mercerie" },
{ text: "saumon", Views: "1", Categorie: "mercerie" },
{ text: "ajoure", Views: "1", Categorie: "mercerie" },
{ text: "merinos", Views: "1", Categorie: "mercerie" },
{ text: "long", Views: "1", Categorie: "mercerie" },
{ text: "4xl", Views: "1", Categorie: "mercerie" },
{ text: "bateau", Views: "1", Categorie: "mercerie" },
{ text: "houp", Views: "1", Categorie: "mercerie" },
{ text: "ideal", Views: "1", Categorie: "mercerie" },
{ text: "mixte", Views: "1", Categorie: "mercerie" },
{ text: "tricolore", Views: "1", Categorie: "mercerie" },
{ text: "pistache", Views: "1", Categorie: "mercerie" },
{ text: "veste", Views: "1", Categorie: "mercerie" },
{ text: "quart", Views: "1", Categorie: "mercerie" },
{ text: "nid", Views: "1", Categorie: "mercerie" },
{ text: "abeille", Views: "1", Categorie: "mercerie" },
{ text: "noir", Views: "1", Categorie: "mercerie" },
{ text: "débardeur", Views: "1", Categorie: "mercerie" },
{ text: "flocon", Views: "1", Categorie: "mercerie" },
{ text: "taille", Views: "1", Categorie: "mercerie" },
{ text: "xxl", Views: "1", Categorie: "mercerie" },
{ text: "ideale", Views: "1", Categorie: "mercerie" },
{ text: "beige", Views: "1", Categorie: "mercerie" },
{ text: "chale", Views: "1", Categorie: "mercerie" },
{ text: "sans", Views: "1", Categorie: "mercerie" },
{ text: "manche", Views: "1", Categorie: "mercerie" },
{ text: "plus", Views: "1", Categorie: "mercerie" },
{ text: "pantalon", Views: "1", Categorie: "mercerie" },
{ text: "pilou", Views: "1", Categorie: "mercerie" },
{ text: "camionneur", Views: "1", Categorie: "mercerie" },
{ text: "bouton", Views: "1", Categorie: "mercerie" },
{ text: "bleu", Views: "1", Categorie: "mercerie" },
{ text: "lichen", Views: "1", Categorie: "mercerie" },
{ text: "prisme", Views: "1", Categorie: "mercerie" },
{ text: "hello", Views: "1", Categorie: "mercerie" },
{ text: "tresor", Views: "1", Categorie: "mercerie" },
{ text: "merilana", Views: "1", Categorie: "mercerie" },
{ text: "plassard", Views: "1", Categorie: "mercerie" },
{ text: "evanescent", Views: "1", Categorie: "mercerie" },
{ text: "intense", Views: "1", Categorie: "mercerie" },
{ text: "mohalana", Views: "1", Categorie: "mercerie" },
{ text: "voluptueux", Views: "1", Categorie: "mercerie" },
{ text: "tradi-merino", Views: "1", Categorie: "mercerie" },
{ text: "tradi", Views: "1", Categorie: "mercerie" },
{ text: "merinotradi", Views: "1", Categorie: "mercerie" },
{ text: "merino", Views: "1", Categorie: "mercerie" },
{ text: "lin", Views: "1", Categorie: "mercerie" },
{ text: "tweed", Views: "1", Categorie: "mercerie" },
{ text: "holi", Views: "1", Categorie: "mercerie" },
{ text: "jasione", Views: "1", Categorie: "mercerie" },
{ text: "barbada", Views: "1", Categorie: "mercerie" },
{ text: "fagonia", Views: "1", Categorie: "mercerie" },
{ text: "lavandula", Views: "1", Categorie: "mercerie" },
{ text: "neptune", Views: "1", Categorie: "mercerie" },
{ text: "datcha", Views: "1", Categorie: "mercerie" },
{ text: "coton-gong", Views: "1", Categorie: "mercerie" },
{ text: "coton-cocktail", Views: "1", Categorie: "mercerie" },
{ text: "week-end", Views: "1", Categorie: "mercerie" },
{ text: "gagnante", Views: "1", Categorie: "mercerie" },
{ text: "seraphine", Views: "1", Categorie: "mercerie" },
{ text: "tendressima1", Views: "1", Categorie: "mercerie" },
{ text: "ecovita1", Views: "1", Categorie: "mercerie" },
{ text: "coton_chanvre", Views: "1", Categorie: "mercerie" },
{ text: "colombine", Views: "1", Categorie: "mercerie" },
{ text: "illona", Views: "1", Categorie: "mercerie" },
{ text: "maya", Views: "1", Categorie: "mercerie" },
{ text: "barisiennebb", Views: "1", Categorie: "mercerie" },
{ text: "bonnie", Views: "1", Categorie: "mercerie" },
{ text: "lin", Views: "1", Categorie: "mercerie" },
{ text: "lincoton", Views: "1", Categorie: "mercerie" },
{ text: "coton", Views: "1", Categorie: "mercerie" },
{ text: "essentiel", Views: "1", Categorie: "mercerie" },
{ text: "dmc", Views: "1", Categorie: "mercerie" },
{ text: "pirouette", Views: "1", Categorie: "mercerie" },
{ text: "poilue", Views: "1", Categorie: "mercerie" },
{ text: "chenille", Views: "1", Categorie: "mercerie" },
{ text: "velvet", Views: "1", Categorie: "mercerie" },
{ text: "short", Views: "1", Categorie: "mercerie" },
{ text: "bapteme", Views: "1", Categorie: "mercerie" },
{ text: "brassiere", Views: "1", Categorie: "mercerie" },
{ text: "naissance", Views: "1", Categorie: "mercerie" },
{ text: "3mois", Views: "1", Categorie: "mercerie" },
{ text: "coeur", Views: "1", Categorie: "mercerie" },
{ text: "nid", Views: "1", Categorie: "mercerie" },
{ text: "ange", Views: "1", Categorie: "mercerie" },
{ text: "turbulette", Views: "1", Categorie: "mercerie" },
{ text: "canevas", Views: "1", Categorie: "mercerie" },
{ text: "demi", Views: "1", Categorie: "mercerie" },
{ text: "point", Views: "1", Categorie: "mercerie" },
{ text: "croix", Views: "1", Categorie: "mercerie" },
{ text: "loisirs", Views: "1", Categorie: "mercerie" },
{ text: "creatifs", Views: "1", Categorie: "mercerie" },
{ text: "reine", Views: "1", Categorie: "mercerie" },
{ text: "neige", Views: "1", Categorie: "mercerie" },
{ text: "escargots", Views: "1", Categorie: "mercerie" },
{ text: "metre", Views: "1", Categorie: "mercerie" },
{ text: "retractable", Views: "1", Categorie: "mercerie" },
{ text: "formes", Views: "1", Categorie: "mercerie" },
{ text: "pompoms", Views: "1", Categorie: "mercerie" },
{ text: "cheval", Views: "1", Categorie: "mercerie" },
{ text: "blanc", Views: "1", Categorie: "mercerie" },
{ text: "allee", Views: "1", Categorie: "mercerie" },
{ text: "mer", Views: "1", Categorie: "mercerie" },
{ text: "kit", Views: "1", Categorie: "mercerie" },
{ text: "corbeille", Views: "1", Categorie: "mercerie" },
{ text: "lina", Views: "1", Categorie: "mercerie" },
{ text: "livres", Views: "1", Categorie: "mercerie" },
{ text: "macrame", Views: "1", Categorie: "mercerie" },
{ text: "metier", Views: "1", Categorie: "mercerie" },
{ text: "tisser", Views: "1", Categorie: "mercerie" },
{ text: "pearl", Views: "1", Categorie: "mercerie" },
{ text: "diamond", Views: "1", Categorie: "mercerie" },
{ text: "geant", Views: "1", Categorie: "mercerie" },
{ text: "mAGASIn", Views: "1", Categorie: "mercerie" },
{ text: "bon_cadeau", Views: "1", Categorie: "mercerie" },
{ text: "carte_fidelite", Views: "1", Categorie: "mercerie" },
{ text: "pRESSe", Views: "1", Categorie: "mercerie" },
{ text: "paris_normandie", Views: "1", Categorie: "mercerie" },
{ text: "bulletin", Views: "1", Categorie: "mercerie" },
{ text: "incendie", Views: "1", Categorie: "mercerie" },
{ text: "boite", Views: "1", Categorie: "mercerie" },
{ text: "accordeon", Views: "1", Categorie: "mercerie" },
{ text: "grande", Views: "1", Categorie: "mercerie" },
{ text: "ferme", Views: "1", Categorie: "mercerie" },
{ text: "ouverte", Views: "1", Categorie: "mercerie" },
{ text: "mallette", Views: "1", Categorie: "mercerie" },
{ text: "panier", Views: "1", Categorie: "mercerie" },
{ text: "grand", Views: "1", Categorie: "mercerie" },
{ text: "modele", Views: "1", Categorie: "mercerie" },
{ text: "fleuri", Views: "1", Categorie: "mercerie" },
{ text: "travailleuse", Views: "1", Categorie: "mercerie" },
{ text: "bois", Views: "1", Categorie: "mercerie" },
{ text: "tiroirs", Views: "1", Categorie: "mercerie" },
{ text: "etui", Views: "1", Categorie: "mercerie" },
{ text: "sac", Views: "1", Categorie: "mercerie" },
{ text: "sangle", Views: "1", Categorie: "mercerie" },
{ text: "transport", Views: "1", Categorie: "mercerie" },
{ text: "biais", Views: "1", Categorie: "mercerie" },
{ text: "fantaisieBiais", Views: "1", Categorie: "mercerie" },
{ text: "fantaisie", Views: "1", Categorie: "mercerie" },
{ text: "sangles", Views: "1", Categorie: "mercerie" },
{ text: "unies", Views: "1", Categorie: "mercerie" },
{ text: "ethniques", Views: "1", Categorie: "mercerie" },
{ text: "double", Views: "1", Categorie: "mercerie" },
{ text: "faces", Views: "1", Categorie: "mercerie" },
{ text: "unis", Views: "1", Categorie: "mercerie" },
{ text: "grand", Views: "1", Categorie: "mercerie" },
{ text: "choix", Views: "1", Categorie: "mercerie" },
{ text: "rubans", Views: "1", Categorie: "mercerie" },
{ text: "fantaisies", Views: "1", Categorie: "mercerie" },
{ text: "plusieurs", Views: "1", Categorie: "mercerie" },
];
const iframescreen = document.getElementById(sourceweb);
const searchInput = document.getElementById("userInput");
const suggestionBox = document.getElementById("SuggestionMot");
const searchBox = document.getElementById("BarRecherche");
const validateButton = document.getElementById("ValideRecherche");
const newongletpage = document.getElementById("newOngletsButton");
const closeonglepage = document.getElementById("closeOngletsButton");
const linkElement = document.getElementById("lien");
const textarea = document.querySelector('#BarRecherche textarea');
const categoriesUniques = [...new Set(mots.map(mot => mot.category))];
const MAX_SUGGESTIONS = 4;
document.getElementById('Fileadd').addEventListener('click', function () {
document.getElementById('file-upload').click();
});
searchInput.addEventListener('keyup', function () {
let input = searchInput.value.trim().toLowerCase();
let finalSuggestions = new Set();
mots.filter(mot => mot.text.toLowerCase().startsWith(input))
.forEach(mot => finalSuggestions.add(mot.text));
categoriesUniques.filter(category => category.toLowerCase().startsWith(input))
.forEach(category => finalSuggestions.add(category));
// Convertir le set en tableau, trier, et limiter le nombre de résultat
const suggestionsArray = [...finalSuggestions]
.sort() // trier alphabétiquement
.slice(0, MAX_SUGGESTIONS);
console.log(categoriesUniques);
console.log(finalSuggestions);
console.log(suggestionsArray);
const result = suggestionsArray.map((data) => '<li>${data}</li>');
updateSuggestions(result);
if (input === "") {
hideSuggestions();
searchBox.style.height = "70px";
textarea.style.height = "40px";
} else {
showSuggestion();
textarea.style.height = '${textarea.scrollHeight}px';
adjustSearchBoxHeight();
}
});
validateButton.addEventListener('click', async () => {
let InputClicktemp = searchInput.value; // récupère la valeur actuelle du champ de recherche
const selectedElement = Array.from(suggestionBox.querySelectorAll("li")).find(li => li.textContent.toLowerCase() === InputClicktemp.toLowerCase());
if (selectedElement) {
select(selectedElement);
} else {
console.error("Aucun élément correspond trouvédans les suggestions.");
}
}
);
searchInput.addEventListener('keydown', (e) => {
if (e.key === 'enter' && !e.shiftKey) {
e.preventDefault(); // Empêche le comportement par defaut (saut de ligne)
validateButton.click(); // Déclenche un clic sur le bouton valide
}
});
function updateSuggestions(list) {
let listData;
if (!list.length) {
userValus = searchInput.value;
listData = '<li>${useValue}</li>';
}else{
listData = list.join('');
}
suggestionBox.innerHTML = listData;
let allList = suggestionBox.quierySelectorAll("li");
for (let i = 0; i < allList.length; i++) {
// adding onclick attribute in all li tag
allList[i].setAttribute("onclick", "select(this)");
}
}
function hideSuggestions() {
suggestionBox.style.opacity = "0";
setTimeout(() => {
suggestionBox.style.display = "none";
}, 300); // Correspond à la durée de la transistion
}
function showSuggestions() {
suggestionBox.style.display = "block";
setTimeout(() => {
suggestionBox.style.opacity = "1";
}, 0); // Force le navigateur à appliquer le style
}
function adjustSearchBoxHeight() {
const suggBoxHeight = suggestionBox.offsetHeight;
const texteraHeight = textarea.offsetHeight;
if (texteraHeight > 45) {
suggestionBox.style.display = "none";
searchBox.style.height = '${35 + texteraHeight}px';
} else {
suggestionBox.style.display = "block";
searchBox.style.height = '$80 + suggBoxHeight)px';
}
}
function select(element) {
if (!element || !element.textContent) {
console.error("l'élément passé à la fonction select est underfined ou ne contient pas de texte.");
return;
}
let motInput = element.textContent;
let input = motInput.toLowerCase();
// A
switch (input) {
case "adorable":
openLink("https://www.pic-et-coud.fr", true);
break;
// B
case "bonnet":
openLink("https://www.pic-et-coud.fr", true);
break;
// C
case "cravate":
openLink("https://www.pic-et-coud.fr", true);
break;
default:
const keywordsRegex = /comment|quoi|pourquoi|quand|qui||salut|slt|bonjour|bjrs|bjr|yo|hello|bonsoir|bsr|holla|bye|/; // liste des mot à vérifier
let motsRef = input.trim().split(/\s+/);
if (keywordsRegex.test(input) || motsRef.length > 4) {
addMessage(input, 'user');
ChoixaddMessage(input)
} else {
openlink("https://wwww.google.com/search?q=" + input, true)
}
}
}
const resizer = document.getElementById('resizer');
const left = document.getElementById("WebSreen");
const right = document.getElementById("Seach");
function openlink(url, openInNewTab) {
searchInput.value = "";
suggestionBox.style.display = "none";
searchBox.style.height = "70px";
iframescreen.scr = url;
setTimeout(() => {
try {
// Test d'accès au contenu de l'ifram (sera bloqué par la CSP si interdit)
let testAccess = iframescreen.contentWindow.location.href;
} catch (error) {
console.warn("L'iframe est bloquée. Ouverture d'un nouvel onglet...");
// openInNewTab = false;
}
}, 1000); // Attendre 1 seconde pour laisser le temps de charger l'iframe
if (openInNewTab) {
window.open(url, "_blanck");
} else {
left.style.display = "block";
resizer.style.display = "block";
iframescreen.style.height = "100%";
newongletpage.style.display = "block";
closeongletpage.style.display = "block";
fondSize()}
}
Mon fichier .css
/* ============ barre de recherche ============ */
body {
font-family: 'Segoe UI, Tahoma, Geneva, Verdana, sans-serif';
margin: 100px;
padding: 100px;
background-color: #f4c99f;
color: white;
display: flex;
width: 30vw;
height: 30vh;
overflow: hidden;
}
h2 {
margin-top: 1.5em;
}
em {
font-style: italic;
}
button {
background-color: #40414f;
color: white;
border: none;
padding: 10px;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
text-align: left;
display: flex;
align-items: center;
gap: 10px;
}
button:hover {
border-radius: 8px;
background-color: #525252;
}
#Seach {
flex: 1;
margin: 0px;
border-radius: 4px;
border: 1px solid #525252;
display: flex;
flex-direction: column;
}
#newOngletsButton {
display: none;
background-color: #8c96f8;
}
#closeOngletsButton {
display: none;
background-color: #9c0604;
}
#newOngletsButton {
display: none;
background-color: #8c96f8;
}
#closeOngletsButton {
display: none;
background-color: #9c0604;
}
.chat-header h2 {
width: 100%;
height: 15px;
color: #ececf1;
margin-top: 0px;
text-align: center;
}
.chat-header button {
max-width: 87px;
margin: 0px 5px;
}
#loginButton {
background-color: rgba(0,0,0,0);
backdrop-filter: blur(10px);
margin-right: 5px;
padding: 1px;
}
#chat-input {
height: 100%;
padding: 10px 10%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
}
#BarRecherche {
max-width: 950px;
width: 100%;
display: flex;
height: 70px;
flex-direction: column;
padding: 15px;
border-radius: 8px;
border-top: 1px solid #525252;
background-color: #40414f;
backdrop-filter: blur(10px);
box-shadow: 0 0 8px rgba(0,0,0,5);
}
#chat-inputSearch {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
}
#sugg {
margin-bottom: 5px;
width: 100%;
height: 200px;
display: block;
transition: opacity 0.3s ease-in-out;
overflow: hidden;
}
#BarRecherche textarea {
flex: 1;
width: 100%;
height: 45px;
max-height: 200px;
background-color: #40414f;
color: white;
padding: 5px 10px;
outline: none;
border: none;
font-size: 1rem;
overflow-y: hidden; /* Cache la barre de défilement */
resize: none; /* Empêche le redimensionnement manuel */
box-sizing: border-box; /* Inclus le padding dans la hauteur */
line-height: 1.5;
}
#SuggestionMot {
margin: 0px;
display: none;
border-radius: 7px;
max-width: 270px;
}
#BarRecherche button:hover {
background-color: #0078d4;
}
#file-upload {
position: absolute;
display: none;
}
li {
display: flex;
align-items: center;
padding-left: 15px;
margin-left: 40px;
height: 29px;
cursor: default;
background-color: #393a45;
color: white;
border-radius: 9px;
border-top: 1px solid #525252;
}
li:hover {
background-color: #444655;
}
/* ============ barre de recherche// ============ */
Le site test : http://www.haguecontact.fr
D'avance merci.
Bonjour,
Ca y est, après un laborieux travail , cela fonctionne.
Si vous le souhaitez vous pouvez essayer sur le site https://www.pic-et-coud.fr
Tous les mots clé ne sont pas encore en place car c'est un travail fastidieux.
Merci de votre aide.
A plus pour d'autres aventures.
Ca y est, après un laborieux travail , cela fonctionne.
Si vous le souhaitez vous pouvez essayer sur le site https://www.pic-et-coud.fr
Tous les mots clé ne sont pas encore en place car c'est un travail fastidieux.
Merci de votre aide.
A plus pour d'autres aventures.