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 |

2 réponses

  1. 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
    1. Informaticman
       
      Merci, je vais essayer de suite ^^
      0
    2. 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
    3. 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
    4. Informaticman
       
      Oui, mais comment, je ne m'y connais quasiment pas en programmation html ...
      0
  2. 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
    1. Informaticman
       
      y aurait pas un petit module en flash tout simple qui fasse ça ?
      0
    2. Informaticman
       
      Sinon, Merci pour les liens ^^
      0
    3. Templier Nocturne Messages postés 9989 Statut Membre 1 107
       
      en flash ? O_o

      tu peux pas faire ça en flash...
      0
    4. 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