Pages :
Bonjour à toutes et à tous.
Je souhaite mettre sur mon site une barre de recherche afin que les visiteurs puissent trouver facilement des articles sur uniquement le site. (exemple: pull, cravate etc...)
Avant de demander votre aide, je souhaite savoir si c'est vraiment très compliqué à mettre en place ?
J'ai parcouru une multitude d'articles concernant le sujet, mais j'avoue être perplexe.
Merci de vos retours et expériences.
Pour info l'adresse du site en question: https://www.pic-et-coud.fr
La barre de recherche ne figure pas sur le site en place , mais j'ai le code pour la mettre en place.(uniquement la barre de recherche Smiley biggrin )
Modérateur
Bonjour,

Eternel problème pas vraiment simple à régler.

- soit on utilise un framework ou un CMS qui intègre peut-être cette fonctionnalité,
- soit on utilise des outils tiers plus ou moins complexe qu'on installe sur le site (des sortes de mini-moteurs de recherche qui vont indexer régulièrement les pages du site),
- soit on utilise des modules fournis par les moteurs de recherche (en gros gratuit avec pub ou payant sans pub).

Amicalement,
Bonjour,
ça date un peu, mais j'avais un jour travaillé sur ça :
Moteur de recherche très efficace et sans mysql-----------------------------------------------
Url : http://codes-sources.commentcamarche.net/source/26615-moteur-de-recherche-tres-efficace-et-sans-mysqlAuteur : bruno2828Date : 02/08/2013

Hélas, le site a apparemment disparu (12 ans d'âge !).
En tout cas, j'avais essayé et ça fonctionnait pour une recherche interne à un site bien sûr. Pas sur le net. Il y a la barre, le moteur.txt et un tout petit JavaScript avec. Il faut remplir à la main le fichier moteur.txt, mais le gros avantage, c'est de ne pas faire appel à une base de données.
J'ai l'ensemble des fichiers, ce n'est pas lourd. Si tu veux.
parsimonhi a écrit :
Bonjour,

Eternel problème pas vraiment simple à régler.

- soit on utilise un framework ou un CMS qui intègre peut-être cette fonctionnalité,
- soit on utilise des outils tiers plus ou moins complexe qu'on installe sur le site (des sortes de mini-moteurs de recherche qui vont indexer régulièrement les pages du site),
- soit on utilise des modules fournis par les moteurs de recherche (en gros gratuit avec pub ou payant sans pub).

Amicalement,

Merci parsimonhi. framework, CMS, mini-moteurs beaucoup trop compliqué si on ne m'en explique pas plus, mais merci.
Bongota a écrit :
En tout cas, j'avais essayé et ça fonctionnait pour une recherche interne à un site bien sûr. Pas sur le net. Il y a la barre, le moteur.txt et un tout petit JavaScript avec. Il faut remplir à la main le fichier moteur.txt, mais le gros avantage, c'est de ne pas faire appel à une base de données.
J'ai l'ensemble des fichiers, ce n'est pas lourd. Si tu veux.

Bonjour Bongota. Je suis preneur avec quelques explications pour la mise en place. Merci.
Modifié par BruChri (27 Sep 2025 - 07:13)
Bonjour,
je te balance les fichiers ici. Je crois, c'est très ancien, qu'il y avait eu des ajustements à faire. Mais je ne me souviens plus de quoi. Je mets en premier le texte de l'auteur :
----------
Voilà un des meilleurs moteurs de recherche que vous pourrez trouver sur internet.
J'ai longtemps cherché en vain un moteur de recherche performant qui marche sans MYSQL et qui vous permet de ne pas ressaisir à chaque fois toutes vos pages et mots clefs.
Bref, un gain de temps considérable !
En effet, seul 1 fichier "moteur.txt" possède tous les renseignements sur vos pages et c'est cette même page qui sera interrogée par toutes les pages de votre site possédant le moteur de base (contenu par index.htm).
Vous pourrez rajouter autant de pages souhaité en dupliquant cette ligne dans le fichier moteur.txt :
c++; item[c]=new Array("","web.html","NEWS DU WEB ?","web, news","Ici, vous trouverez toutes l'actualité sur le web .......");
En plus cette astuce allège vos pages...
Bref un moteur de recherche à adopter !
N'hésitez pas à me prévenir si vous avez amélioré ce script...
@+ Bruno
WWW.EVASIONTOTALE.FR.ST
--------------
<!--Script créé par Bruno
 http://www.evasiontotale.fr.st
 
Un site où il fait bon s'évader et se changer les idées !-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Moteur</title>
<SCRIPT LANGUAGE="JavaScript" SRC="moteur.txt">
</SCRIPT>
</head>
<body>
<p align="center">Votre moteur de recherche &agrave; inserer : </p>
<TABLE WIDTH="141" BORDER=0 align="center" CELLPADDING=0 CELLSPACING=0>
<TR>
<TD> 
<center>
<form method=get action="javascript:void(0)" onsubmit="search(this); return false;">
<table width="143">
<tr><td valign="middle" align="center" width="151">
    <p align="center">
    <input type=text name=srchval value="" size="18">
    <input type=submit value="Votre recherche">
    </p>
  <td>
  </td>
  <center>
</form>
</center>
</table>
<div align="center"></div>
</body>
</html>

var item = new Array();

// "La page","","","","Mot clés",""

c=0; item[c]=new Array("","","","Première page de ce site");

c++; item[c]=new Array("","web.html","NEWS DU WEB ?","web, news","Ici vous trouverez toutes l'actualité sur le web .......");

page="<html><head><title>Résultats de la recherche</title></head><body bgcolor='white'><center><table border=0 cellspacing=10 width=80%>";

function search(frm) {
win=window.open("","");
win.document.write(page);
txt = frm.srchval.value.split(" ");
fnd = new Array(); total=0;
for (i = 0; i < item.length; i++) {
fnd[i] = 0; order = new Array(0, 4, 2, 3);
for (j = 0; j < order.length; j++)
for (k = 0; k < txt.length; k++)
if (item[i][order[j]].toLowerCase().indexOf(txt[k]) > -1 && txt[k] != "")
fnd[i] += (j+1);
}
for (i = 0; i < fnd.length; i++) {
n = 0; w = -1;
for (j = 0;j < fnd.length; j++)
if (fnd[j] > n) { n = fnd[j]; w = j; };
if (w > -1) total += show(w, win, n);
fnd[w] = 0;
}
win.document.write("</table><br>Pages trouvé(s): "+total+"<br></body></html>");
win.document.close();
}
function show(which,wind,num) {
link = item[which][1] + item[which][0]; 
line = "<tr><td><a href='"+link+"'>"+item[which][2]+"</a> Item numéro "+num+"<br>";
line += item[which][4] + "<br>"+link+"</td></tr>";
wind.document.write(line);
return 1;
}

########## Ici commence le readme
Moteur de recherche très efficace et sans mysql-----------------------------------------------
Url : http://codes-sources.commentcamarche.net/source/26615-moteur-de-recherche-tres-efficace-et-sans-mysqlAuteur : bruno2828Date : 02/08/2013
Ce document intitulé « Moteur de recherche très efficace et sans mysql » issu de CommentCaMarche
(codes-sources.commentcamarche.net) est mis à disposition sous les termes de
la licence Creative Commons. Vous pouvez copier, modifier des copies de cette
source, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Description :
Voil&agrave; un moteur de recherche qui saura se rendre utile sur votre page web !
<br />En effet celui-ci n'a pas besoin de base de donn&eacute;e MYSQL (php)
et d&eacute;pend d'un fichier text
<br />o&ugrave; toutes les infos serront sai
sie par vous m&ecirc;me une seul fois !
<br />
<br />Mais l'originalit&eacute;
de ce moteur c'est qu'il n'est pas n&eacute;cessaire de copier et de modifier t
outes les pages sur lesquelles vous avez le moteur !
<br />Un gain de temps con sid&eacute;rable pour celui qui ne souhaite pas utiliser de PHP !
<br />
<br /
>@+
<br />
<br />Bruno.
<br />---------------------
<br />Webmaster de votre future page de d&eacute;marrage sur internet www.evasiontotale.com
<br /><a name='source-exemple'></a><h2> Source / Exemple : </h2>
<br /><pre class='code' data-mode='basic'>
Tout est dans le ZIP !
</pre>
<br /><a name='conclusion'><
/a><h2> Conclusion : </h2>

<br />Bonne Chance et bonne prog ! ;o)
###################
Bongota a écrit :


&lt;br /&gt;Bonne Chance et bonne prog ! ;o)
###################


Merci Bongota, alors là , y'a du boulot. Je ne pense pas pouvoir m'en sortir, mais merci. ( attention, les liens ne sont plus d'actualité)
Oui, j'avais prévenu au sujet des liens.
Entre-temps, j'ai effectué quelques recherches, parce que ta question a relancé mon idée d'avoir une barre de recherche sur l'un de mes sites.
Il existe des solutions avec JavaScript, plus modernes et plus claires que celles que j'ai données. Le résultat est le même, je viens d'en expérimenter une. Le travail à faire est cependant équivalent à celui de ma proposition précédente. À toi de voir.
Une chose, à savoir quand même avec ce genre de barre de recherche :
- Le script recherche l'existence dans la page html d'un mot entré dans la barre de recherche, c'est tout. Il signale au visiteur que ce mot existe. Mais ça peut aussi être l'indication d'un lien, d'un prix, ou d'autre chose.
- Le mot découvert n'est pas mis en surbrillance dans la page. Le visiteur devra le trouver lui-même. Ce n'est pas une ancre qui dirige vers un mot.
Sinon, on peut faire appel à l'extérieur. Google et d'autres proposent des barres de recherche pour son site web. Avec cette solution, on n'est plus chez soi, et la recherche dépend largement de la façon dont le site est indexé par les moteurs de recherche.
C'est franchement pas le pied. Smiley ohwell
Modifié par Bongota (27 Sep 2025 - 20:34)
Bongota a écrit :
Il existe des solutions avec JavaScript, plus modernes et plus claires que celles que j'ai données. Le résultat est le même, je viens d'en expérimenter une. Le travail à faire est cependant équivalent à celui de ma proposition précédente. À toi de voir.


Merci Bongota, je suis intéressé, j'ai déjà dressé la liste des mots clés pour la barre de recherche.
Je suis sur le test de cette nouvelle barre de recherche. Le JavaScript fonctionne, le fichier de mots clés aussi, le résultat d'une recherche. Tout est là. Je me bats par contre avec un vulgaire css et l'affichage du résultat de la barre de recherche. Il y a un ascenseur, chose inacceptable pour une barre de recherche. Quand ce sera au point, je te donnerai le code. Il faut que je repose ma tête, je viens de passer quatre heures dessus.
Bongota a écrit :
Je suis sur le test de cette nouvelle barre de recherche. Le JavaScript fonctionne, le fichier de mots clés aussi, le résultat d'une recherche. Tout est là. Je me bats par contre avec un vulgaire css et l'affichage du résultat de la barre de recherche. Il y a un ascenseur, chose inacceptable pour une barre de recherche. Quand ce sera au point, je te donnerai le code. Il faut que je repose ma tête, je viens de passer quatre heures dessus.


Bonjour Bongota, ne travaillerai tu pas sur le sujet Ronasdev ?
Je travaille sur ce Tuto , mais je bloque sur le
.addEventListener("input", function(){


Voilà le script.js
// 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);
    }
})


Sinon l'intégration sur mon site se fait bien avec mon .css et .html
Merci de ton aide et celle des autres.
Modifié par BruChri (28 Sep 2025 - 12:17)
Salut,
comme je profite de ce genre de projet pour améliorer ma compréhension du JavaScript, j'ai commencé en m'inspirant de plusieurs scripts. J'étais arrivé au bout, ça fonctionnait, mais je ne savais pas réaliser la complétion des mots entrés, élément important. J'ai demandé à une IA, qui m'a donné la réponse fonctionnelle, mais cette IA a apporté d'autres problèmes avec un css inexploitable sur mon site !!! Évidemment, c'est une machine qui n'avait pas les yeux sur ma page.
Mais ton projet m'intéresse aussi. Pourrais-tu aussi donner le script JSON, dans lequel il y a les mots clés.
En tout cas, des expériences que j'ai lancées depuis hier soir, faire fonctionner un script n'est pas le problème. Il faut par contre apporter une grande attention aux mots entrés dans la base, qu'elle soit JSON ou JavaScript.
À mon avis, il faut d'abord déterminer avec soin les mots clés du site. Ceci devrait d'ailleurs être déjà fait avant pour le SEO. Mettre en gras ces mots clés dans le texte de la page est aussi une bonne option. Ainsi, quand un visiteur entrera un mot clé (qu'il attend sur ce site), il n'aura pas de peine à le retrouver dans le texte. Sinon, je ne vois pas à quoi peut servir une barre de recherche interne. Je commence d'ailleurs à avoir des doutes à ce sujet.

Finalement, puisque tu es sur un autre projet, veux-tu mon script, qui fonctionne correctement ?
Bongota a écrit :
Salut,
comme je profite de ce genre de projet pour améliorer ma compréhension du JavaScript, j'ai commencé en m'inspirant de plusieurs scripts. J'étais arrivé au bout, ça fonctionnait, mais je ne savais pas réaliser la complétion des mots entrés, élément important. J'ai demandé à une IA, qui m'a donné la réponse fonctionnelle, mais cette IA a apporté d'autres problèmes avec un css inexploitable sur mon site !!! Évidemment, c'est une machine qui n'avait pas les yeux sur ma page.
Mais ton projet m'intéresse aussi. Pourrais-tu aussi donner le script JSON, dans lequel il y a les mots clés.

Bonjour. Voilà un extrait de mon code data.json qui en contient environ 340:
[
    "pull",
    "jupe",
    "robe",
    "cravate",
    "accessoire",
    "Mercerie",
    "Buchy",
    "Rouen",
    "Tricot",
    "Couture",
    "Pic & Coud 2.0",
    "laine",
    "tricoter",
    "Bergère",
    "de",
    "France",
    "Broderie",
    "Retouche",
    "Christelle",
    "Hague",
    "Créations",
    "Textile",
    "Tricot"

]


Finalement, puisque tu es sur un autre projet, veux-tu mon script, qui fonctionne correctement ?

Oui, d'avance merci.
Modifié par BruChri (29 Sep 2025 - 07:49)
Salut,
le code JSON est exactement le même que celui du JS, c'est une array.
Voici le mien :
 <!-- Formulaire de recherche -->
<form id="searchForm" onsubmit="return false;">
    <input type="text" id="searchInput" placeholder="Recherchez les mots clé sur cette page" style="background-image:url(Images/Loupe.png);background-position:right;background-repeat:no-repeat;padding-left:.4em;width:20em;border:2px solid #000;
    border-radius:4px;" />                         
</form>
<!-- Zone d'affichage des résultats -->
<div id="results"></div>
<script>
// Données à rechercher
const data = [
  "Un mot",
  "Un autre mot",
  "",
  "",
  "Le dernier mot"
];
function search() {
  const query = document.getElementById('searchInput').value.toLowerCase().trim();
  const resultsDiv = document.getElementById('results');
  resultsDiv.innerHTML = "";

  if (query === "") {
    resultsDiv.innerHTML = "";
    return;
  }
  const results = data.filter(item => item.toLowerCase().includes(query));
  if (results.length > 0) {
    const ul = document.createElement('ul');
    results.forEach(res => {
      // Mettre en surbrillance le mot dans le résultat
      const regex = new RegExp(`(${query})`, 'gi'); // 'gi' pour global et case-insensitive
      const highlightedText = res.replace(regex, '<span class="highlight">$1</span>');
      
      const li = document.createElement('li');
      li.innerHTML = highlightedText; // utiliser innerHTML pour insérer la balise span
      ul.appendChild(li);
    });
    resultsDiv.appendChild(ul);
  } else {
    resultsDiv.innerHTML = "Aucun résultat";
  }
}
document.getElementById('searchInput').addEventListener('input', search);
</script>

Il fonctionne, j'ai ajouté une loupe avec "style". Ce "style" ira dans le css par la suite.
Sur ce script, il y a la complétion des mots cherchés, indispensable, et la surbrillance du mot trouvé, ce qui permet de lui donner une couleur et une taille.
Bongota,
Je viens de tester ton code et je te remercie.
Cependant cela ne fonctionne pas chez moi, lorsque je fais sur le site de test : http://0coolmsn.free.fr
=> inspecter => Console , j'ai le message suivant :
a écrit :
Uncaught SyntaxError: Unexpected token '<' script.js:1
au lieu d'avoir "Array et le nombre de ligne"
Merci de ton aide et celui des autres.
Si ton code fonctionne, ne t'embête pas avec le mien. C'est juste un autre façon de faire, très similaire.
Je te mets quand même le CSS, j'ai travaillé dessus afin d'avoir la loupe directement en background sur #searchInput. Mais je m'aperçois que j'ai deux ID dans le même HTML, à corriger Smiley confus Je vais devoir modifier un peu le JS pour ça.
#results {
  position:relative;
  margin-top: 0;
  margin-bottom:0;
  width: 20em;
  height:2em; /* hauteur minimale pour voir une ligne */
  padding: 10px;
  background-color: #FFF;
  color:black;
  border: 2px solid #000;
  border-radius:4px;
  overflow-y: hidden;}

#results ul {
  white-space: nowrap; /* empêche le retour à la ligne dans la liste */
  margin-left: 20px;
  margin-top:-9.4em;
  list-style: none;}
  
.highlight {
	color:red;
	font-size:1.2em;
	overflow: auto;}
	
#searchInput {
	position:relative;
	text-align:left;
	font-size:1em;
	color:#000;
	width:20em;
	background-color:lightblue;
	background-image:url(Images/Loupe.png);
	background-position:right;
	background-repeat:no-repeat;
	padding-left:10px;
	border: 2px solid #000;
    border-radius:4px;}

Le CSS est à ajuster pour les mobiles. Et il faut enlever la partie "style" que j'avais mis dans le html pour les expérimentations.
upload/1759139855-67790-barre.png
Modifié par Bongota (29 Sep 2025 - 12:08)
casper2 a écrit :
Bonjour, dans le fichier http://0coolmsn.free.fr/script.js tu ne peux pas avoir de balise HTML uniquement du code JavaScript. Soit le code entre &lt;script&gt; et &lt;/script&gt; uniquement.


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"
Bongota a écrit :
Si ton code fonctionne, ne t'embête pas avec le mien. C'est juste un autre façon de faire, très similaire.


Je n'ai pas de problème de .css ni .html, mais je pensais que ton script.js fonctionnais.
Le mien ne fonctionne pas à partir de là :
function displayResults(result){
    const resultsContainer = document.getElementById("results");
    resultsContainer.innerHTML = "";

Modifié par BruChri (29 Sep 2025 - 12:23)