Comment créer une barre de recherche ?

Informaticman -  
 Informaticman -
Bonjour, je suis en train de créer mon site web, j'utilise Macromedia Dreamweaver 2 pour la création de mes pages et j'ai très peu de connaissances en programmation. Je voudrais savoir s'il serait possible de créer une barre de recherche en bas de ma page. J'aimerais que, en tapant un mot, par exemple le nom d'un logiciel parmi une liste dans la même page, ça me surligne ou me souligne le logiciel que j'ai cherché dans la liste. J'aimerais que ça fasse un peu le même résultat que la recherche dans IE par exemple (Edition --> Rechercher sur la page... ---> On tape un mot clé --> les mots dans la page contenant ce qu'on a tapé sont surlignés). Je crois que j'ai donné le plus de précision possible.
Merci d'avance pour votre aide !

Exemple :
Liste de logiciels :
Mozilla Firefox Télécharger
Google Chrome Télécharger
Internet Explorer Télécharger
Safari Télécharger
Opéra Télécharger
Netscape Télécharger
____________________________________________

Recherche d'un logiciel : |Chro |

A voir également:

2 réponses

Templier Nocturne Messages postés 9989 Statut Membre 1 107
 
il te faut faire ça en JavaScript.

voilà un code à modifier qui pourait t'aider :

<script language="JavaScript">
var n = 0;
function findInPage(str) {
var txt, i, found;
if (str == "") return false;
if (document.layers) {
if (!window.find(str)) while(window.find(str, false, true)) n++;
else n++;
if (n == 0)
alert("Not found.");
}
if (document.all) {
txt = window.document.body.createTextRange();
for (i = 0; i <= n & (found = txt.findText(str)) != false; i++) {
txt.moveStart("character", 1);
txt.moveEnd("textedit");
}
if (found) {
txt.moveStart("character", -1);
txt.findText(str);
txt.select();
txt.scrollIntoView();
n++;
}
else {
if (n > 0) {
n = 0;
findInPage(str);
}
else
alert("Not found.");
}
}
return false;
}
</script>
<form name="search" onSubmit="return findInPage(this.string.value);">
<font size=3>
<input name="string" type="text" size=15 onChange="n = 0;">
</font>
<input type="submit" value="Find">
</form>
<p>


un deuxième :

    * <SCRIPT language=JavaScript>
    * /* Find In Page Script- By Mike Hall (MHall75819@aol.com) */
    * /* Recherche de mot */
    * var NS4 = (document.layers); // Which browser?
    * var IE4 = (document.all);
    * var win = window; // window to search.
    * var n = 0;
    * function findInPage(str) {
    * var txt, i, found;
    * if (str == "")
    * return false;
    * // Find next occurance of the given string on the page, wrap around to the
    * // start of the page if necessary.
    * if (NS4) {
    * // Look for match starting at the current point. If not found, rewind
    * // back to the first match.
    * if (!win.find(str))
    * while(win.find(str, false, true))
    * n++;
    * else
    * n++;
    * // If not found in either direction, give message.
    * if (n == 0)
    * alert("Je suis navré, je n'ai rien trouvé. Vérifiez l'orthographe.");
    * }
    * if (IE4) {
    * txt = win.document.body.createTextRange();
    * // Find the nth match from the top of the page.
    * for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) {
    * txt.moveStart("character", 1);
    * txt.moveEnd("textedit");
    * }
    * // If found, mark it and scroll it into view.
    * if (found) {
    * txt.moveStart("character", -1);
    * txt.findText(str);
    * txt.select();
    * txt.scrollIntoView();
    * n++;
    * }
    * // Otherwise, start over at the top of the page and find first match.
    *
    * else {
    * if (n > 0) {
    * n = 0;
    * findInPage(str);
    * }
    * // Not found anywhere, give message.
    * else
    * alert("Je suis navré, je n'ai rien trouvé. Vérifiez l'orthographe.");
    * }
    * }
    * return false;
    * }
    * </SCRIPT>
    *
    * <FORM name=search onsubmit="return findInPage(this.string.value);"><INPUT
    * name=string onchange="n = 0;">
    * <INPUT type=submit value=Rechercher></FORM>


j'espère que ces deux codes t'aideront :)
0
Informaticman
 
Merci, je vais essayer de suite ^^
0
Informaticman
 
J'ai essayé les deux codes. J'ai créé une page avec Dreamweaver 2, j'ai mis quelques mots (voiture, jeu...) et j'ai intégré le code à la fin de la page. Avec le premier code, quand je tape "v", ça me surligne le v de voiture, quand je tape "vo" ça me surligne vo de voiture, quand je tape "voi" ça me surligne voi de voiture mais quand je tape "voit" ça me dit : "not found". Et avec le deuxième code, ça ne fait rien : je tape quelque chose, je met rechercher et il n'y a aucune réaction. Comment pourrais-je remédier à ces problèmes ?
Merci d'avance
0
Templier Nocturne Messages postés 9989 Statut Membre 1 107
 
comme je te l'ai dit, ce sont deux codes d'exemple, ils sont à modifier
0
Informaticman
 
Oui, mais comment, je ne m'y connais quasiment pas en programmation html ...
0
Templier Nocturne Messages postés 9989 Statut Membre 1 107
 
tu veux faire si site web sans t'y connaitre en HTML & cie...

compte tenu de ce que tu veux, je crois que ça va pas être possible...

https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3

http://www.siteduzero.com/tutoriel-3-8158-tout-sur-le-javascript.html

bon courage ;)
0
Informaticman
 
y aurait pas un petit module en flash tout simple qui fasse ça ?
0
Informaticman
 
Sinon, Merci pour les liens ^^
0
Templier Nocturne Messages postés 9989 Statut Membre 1 107
 
en flash ? O_o

tu peux pas faire ça en flash...
0
Informaticman
 
Est-ce que tu pourrais me dire quoi modifier dans le code pour qu'il fonctionne sur mon site, j'ai commencé à regarder le tuto mais mon site doit être prêt dans quelques jours alors, je n'ai pas trop le temps. Si nécessaire, je peux mettre en ligne la page où je veux mettre cette barre de recherche afin que tu puisses m'aider à adapter la barre de recherche (et donc le code). Merci beaucoup.
0