Formulaire de recherche javascript

Bonjour,

J’ai ce script de recherche que j’ai téléchargé, mais je voudrais, lors d’une recherche, qu’une image s’affiche à gauche (un peu comme clubic) différente pour chacun des résultats, et mettre un texte (sans lien) en dessous du titre (ayant un lien), voilà le script (dans </head):

Et dans le body :

PS : j’ai dans les résultats le nom de la page écrit entre parenthèse, (exemple : Titre1 (page1.html) ), comment l’enlever ?

Merci d’avance,

Wmasters
Edité le 03/03/2008 à 08:40

Bonjour,

Peux tu mettre un titre de sujet plus explicite, s’il te plaît?

Merci :slight_smile:

Essaye d’être plus précis sur l’endroit de l’image et du type d’image que tu souhaiterai avoir stp :wink:

Pour enlever les parenthèse, cherche ceci, dans la fonction [b]SearchItem/b:

Z+="<A target='"+tjs_base.target+"' href='"+tjs_base[i].page+"'>"+tjs_base[i].desc+"</A> <SMALL>("+tjs_base[i].page+")</SMALL><BR>"

Remplace par:

Z+="<A target='"+tjs_base.target+"' href='"+tjs_base[i].page+"'>"+tjs_base[i].desc+"</A><BR>"

Maintenant si tu veux ajouter une image devant chaque ligne de résultat (si c’est ça que tu veux) tu reprends dans ce cas cette nouvelle ligne de code et tu rajoute au tout début une image, exemple:

Z+="<img src='http://www.clubic.com/api/forum/img/favoris-sujet.gif'><A target='"+tjs_base.target+"' href='"+tjs_base[i].page+"'>"+tjs_base[i].desc+"</A><BR>"

(J’ai pris une image bidon du form de Clubic)

En faite je voudrais une image différente pour chacun des resultats, je les ajouterais dans la “base”.Iimage 30x30 gif par exemple. En faite il y aurait l’image de Windows en .gif à coté de l’image (en haut) le titre et en dessous un petit texte de 2 lignes (comme le systeme de recherche de clubic a peu près. sinon merci déjà pour les parenthèses.
Edité le 03/03/2008 à 08:43

Personne ne sait ? C’est très important, c’est pour un concours. :slight_smile:

Je suis désolé mais c’est pas trop clair :neutre: ce que tu veux, tu pourrais détailler par un exemple avec une image par exemple.
On va y arriver :super:

Note: Notifie moi encore par mp si j’oublie de te répondre
Edité le 04/03/2008 à 08:15

Voilà

http://images3.hiboox.com/vignettes/1008/s7gb0c99.png

En faite lors de la recherche, le script va chercher les résultats dans la base, dans les mot clés, il affiche les résultats correspondant à ce mot clé (si il existe). Puis quand les réusltats sont trouvés, il affiche l’image correspondant à l’article “booster son PC” (par exemple), la description (en une couleur différente du titre)
En faite dans la base il y aurait :
(page.html / Titre de l’article / Description de l’article / Image de l’article / Mots clés de l’article)
(page.html / Titre de l’article / Description de l’article / Image de l’article / Mots clés de l’article)
(page.html / Titre de l’article / Description de l’article / Image de l’article / Mots clés de l’article)

Voilà j’espère avoir été précis.:slight_smile:

Hum ok… je vais voir ce que je peux faire… là j’immerge un peu :wink:

Et voila Monsieur… attention ça déborde sur le coté droit … prend bien tout le code.

<html>
<head>
<SCRIPT language=javascript>

// Création de la base de données
var tjs_base=new TJS_InitBase("_self");
// TJS_InitBase(target) : target="_blank" pour ouvrir dans une nouvelle page
tjs_base.Add("page1.html","Titre 1", "test","puce-verte.gif", "AA");
tjs_base.Add("page2.html","Titre 2","2 test","puce-orange.gif", "clé2");
tjs_base.Add("page3.html","Titre 3","3 test","puce-rouge.gif", "mot ");
// COMPLETEZ ICI la base de données
// tjs_base.Add(page,titre,mots-clés)


function TJS_InitBase(target) {
this.nb_item=0;
this.target=target;
this.Add=AddItem;
this.Search=SearchItem;
}
function AddItem(page,titre,desc,img,cle) {
var nb = this.nb_item;
var item = new Object;
item.page=page;
item.titre=titre;
item.desc=desc;
item.img=img;
item.cle=cle;
this[nb]=item;
this.nb_item++;
}


function SearchItem(txt) {
// txt contient le texte de la recherche
txt = unescape(txt);
txt = txt.replace(/\+/g," ");
var n=tjs_base.nb_item;
var indice=-1;
if (txt=="Saisir un mot clé") {alert("Entrez un mot pour la recherche"); }
else{
document.forms["tjs_search"].elements["mot"].value=txt;
var Z=""; var nb=0;
for (var i=0; i<n; i++) {
if (tjs_base[i].cle.toUpperCase().indexOf(txt.toUpperCase(),0)!="-1") {
Z+="<table><tr><td><img src='"+tjs_base[i].img+"'></td><td><A target='"+tjs_base.target+"' href='"+tjs_base[i].page+"'>"+tjs_base[i].titre+"</A><BR>" +tjs_base[i].desc+ "</td></tr></table>"
nb++;
}
}
if (nb>0) {
if (nb==1) {Z="Un résultat trouvé pour la recherche sur <B>"+txt+"</B> : <BR>"+Z;}
else {Z=nb+" résultats trouvés pour la recherche sur <B>"+txt+"</B> : <BR>"+Z;}
}else{Z="Aucun résultat pour la recherche sur <B>"+txt+"</B><BR>Vérifiez l'orthographe ou essayez d'autres mots clés.";}
document.write(Z);
}
}

function TJS_Search(f) {
if (f.mot.value!=""){f.submit();}
}

function TJS_PrintResult() {
var url=document.location.href;
if (url.indexOf("?mot=",0) > 0) {
var mot=url.substring(url.indexOf("?mot=",0)+5);
SearchItem(mot);
}
}

</SCRIPT>
</head>
<body>
Et dans le body :


<FORM name=tjs_search METHOD=get action="search.html">
<INPUT NAME="mot" SIZE=71 MAXLENGTH=35 value="Saisir un mot clé" onFocus="if (this.value=='Saisir un mot clé') {this.value=''}" onBlur="if (this.value==''){this.value='Saisir un mot clé'}">
<INPUT TYPE="button" name="bouton" VALUE="Rechercher" onClick="TJS_Search(this.form)">
</FORM>

<SCRIPT language=javascript>
// Affichage des résultats éventuels.
TJS_PrintResult();
</SCRIPT>
</body>
</html>

Edité le 05/03/2008 à 09:42

Super ça marche ! Merci !
Mais une dernière petite question comment est-ce que je peux faire pour modifier la police (couleur, taille) du sous titre et du titre ?
En faite je voudrais juste réduire un peu la taille de la police pour les deux, mais le sous titre en gris.

Tu cherche la ligne suivante:

Z+="<table><tr><td><img src='"+tjs_base[i].img+"'></td><td><A target='"+tjs_base.target+"' href='"+tjs_base[i].page+"'>"+tjs_base[i].titre+"</A><BR>" +tjs_base[i].desc+ "</td></tr></table>"

Et tu l’adapte avec:

Z+="<table><tr><td><img src='"+tjs_base[i].img+"'></td><td><A target='"+tjs_base.target+"' href='"+tjs_base[i].page+"'><font size=2><font color='#0FF0FF'>"+tjs_base[i].titre+"</font></font></A><BR>" +tjs_base[i].desc+ "</td></tr></table>"

Ici j’ai juste rajouté <font …> … pour le titre en utilisant la propriété size pour la taille et color pour la couleur.
Edité le 06/03/2008 à 08:07

Merci !:slight_smile:

Est-il possible de mettre la “base de donnée” dans un fichier à part ? Que le script appelle le fichier où contient les différents résultats possibles ?

Tu te créé un fichier .JS qui contiendra (pense à enlever ce bout de ta page .HTML):


var tjs_base=new TJS_InitBase("_self");
// TJS_InitBase(target) : target="_blank" pour ouvrir dans une nouvelle page
tjs_base.Add("page1.html","Titre 1", "test","puce-verte.gif", "AA");
tjs_base.Add("page2.html","Titre 2","2 test","puce-orange.gif", "clé2");
tjs_base.Add("page3.html","Titre 3","3 test","puce-rouge.gif", "mot ");

Dans ton fichier .HTML tu mettera

<script src='NomDeFichier.js' type="text/javascript"></script>

AVANT le code ci-dessous se trouvant dans la balise BODY


<SCRIPT language=javascript>
// Affichage des résultats éventuels.
TJS_PrintResult();
</SCRIPT>

Edité le 07/03/2008 à 07:25

Merci ça marche, tu me sauves, c’est pour un concours ! :clap: