Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1771 connectés 

  FORUM HardWare.fr
  Programmation
  PHP

  Barre de rechrche sur une page HTML

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Barre de rechrche sur une page HTML

n°1862896
johnson950
Posté le 18-03-2009 à 10:42:35  profilanswer
 

Bonjour,
 
J'aimerais ajouter sur ma page HMTL, une barre de recherche intelligente, je m'explique :
 
Ma page contient un tableau avec les renseignements suivants :
NOM ADRESSE TEL FAX MAIL
 
Cependant la longueur du tableau commence a être relativement longue, c'est pourquoi je veux ajouter une barre de recherche.
 
Prenons un exemple avec seulement 3 enregistrements :
 
NOM ADRESSE TEL FAX MAIL
test 1 test 1 test 1 test 1 .....  
test 2 test 2 test 2 test 2 .....  
test 3 test 3 test 3 test 3 .....  
 
Lorsque je tape "test 1" sur la barre, j'aimerais que ma page se cale sur la ligne test 1
Ceci sera la premiere étape.
 
La seconde étape consistera à afficher sous la barre les résultats au fur et a mesure qu'une personne va taper quelque chose sur la barre.
 
Exemple :
Si la personne tape "test"
Sous la barre j'aimerais que test 1 test 2 et test 3 apparaissent.
Sinon si je tape "1", je devrais avoir test 1 qui apparait.
 
Voila la problematique actuelle !
 
En parrallele, je pense que la premiere étape est faisable en utilisant des balise <balise> pour chaque NOM puis lorsqu'une personne va taper son NOM, je n'aurais plus qu'a utiliser # + le nom qu'il vient de taper.
 
Pensez vous que ceci soit une bonne solution ?
 
Cependant pour ma seconde problematique je nage un peu ... si j'avais une base de données cela aurait été plus simple mais le je dois me débrouiller avec cela.
 
Merci de votre aide

mood
Publicité
Posté le 18-03-2009 à 10:42:35  profilanswer
 

n°1862937
stealth35
Posté le 18-03-2009 à 11:12:13  profilanswer
 

t'as une base de donnée derriere ?

n°1863048
johnson950
Posté le 18-03-2009 à 13:31:32  profilanswer
 

non

n°1863082
rufo
Pas me confondre avec Lycos!
Posté le 18-03-2009 à 14:11:01  profilanswer
 

Bon ben faut passer par du javascript alors. Tu parcours les lignes de ton tableau jusqu'à ce que tu trouves l'info tapée dans la barre de recherche. Pour le positionnement, je pense que ça serait utile que chaque <tr> de ton tableau ait un id, comme ça, tu pourras utiliser le positionnement par les ancres (window.location="pagecourrante.html#"+id_trouve; )


Message édité par rufo le 18-03-2009 à 14:11:28

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
n°1863083
stealth35
Posté le 18-03-2009 à 14:12:45  profilanswer
 

getElementsByTagName  c'est plus simple, pas besion de mettre d'id, je vais faire un petit test

n°1863089
rufo
Pas me confondre avec Lycos!
Posté le 18-03-2009 à 14:18:34  profilanswer
 

bien sûr, mais l'id, c'est pour pouvoir se positionner dans la page (la faire défiler à la bonne ligne dans le tableau), utiliser les ancres donc. A ma connaissance, getElementsByTagName ne permet pas de faire ça (et pour rappel, cette fonction est très lourde en consommation cpu, beaucoup plus que getElementById).


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
n°1863103
stealth35
Posté le 18-03-2009 à 14:40:33  profilanswer
 

bah ecoute ca marche tres bien
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5.  <title>test table</title>
  6. </head>
  7. <body>
  8.  <script type="text/javascript">
  9.   // <![CDATA[
  10.    if (window.addEventListener){
  11.     window.addEventListener("load", addOnLoad, true);
  12.    } else if (window.attachEvent) {
  13.     window.attachEvent("onload", addOnLoad);
  14.    }
  15.    function addOnLoad() {
  16.     var table = document.getElementById('request');
  17.     for(var i in table.getElementsByTagName('tr')){
  18.      if(table.getElementsByTagName('tr')[i].style)
  19.      table.getElementsByTagName('tr')[i].style.display = 'none';
  20.     }
  21.    }
  22.    function getData(value){
  23.     var table = document.getElementById('request');
  24.     for(var i in table.getElementsByTagName('tr')){
  25.      var tr = table.getElementsByTagName('tr')[i];
  26.      var text = tr.getElementsByTagName('td')[1].innerHTML;
  27.      var is = text.indexOf(value, 0);
  28.      if(is > -1){
  29.       tr.style.display = '';
  30.      }else{
  31.       tr.style.display = 'none';
  32.      }
  33.     }
  34.    }
  35.   // ]]>
  36.  </script>
  37.  <input type="text" name="query" value="" onkeyup="getData(this.value)"/>
  38.  <table id="request" border="1">
  39.   <tr><td>1</td><td>test 1</td></tr>
  40.   <tr><td>2</td><td>test 2</td></tr>
  41.   <tr><td>3</td><td>test 3</td></tr>
  42.   <tr><td>4</td><td>test 4</td></tr>
  43.   <tr><td>5</td><td>test 5</td></tr>
  44.   <tr><td>6</td><td>test 6</td></tr>
  45.   <tr><td>7</td><td>test 7</td></tr>
  46.   <tr><td>8</td><td>bla </td></tr>
  47.   <tr><td>9</td><td>sqdsqdqsd</td></tr>
  48.   <tr><td>10</td><td>tegrgsdfg</td></tr>
  49.   <tr><td>11</td><td>tesdfsdfsfs</td></tr>
  50.  </table>
  51. </body>
  52. </html>


Message édité par stealth35 le 18-03-2009 à 14:40:44
n°1863109
johnson950
Posté le 18-03-2009 à 14:47:33  profilanswer
 

waouuuuuuuuuhh !!
 
Ca marche super bien en plus!
Cependant juste une dernière petite précision.
 
Est il possible d'avoir les résultats non pas sous la forme d'un tableau se trouvant en dessous mais plutôt comme sur google par exemple avec une liste qui s'ouvre ?
 
Merci encore c'est géniale, je vais bien comprendre le fonctionnement pour le faire a ma sauce !!

n°1863111
stealth35
Posté le 18-03-2009 à 14:49:04  profilanswer
 

genre auto completion ?

n°1863114
johnson950
Posté le 18-03-2009 à 14:59:22  profilanswer
 

oui

mood
Publicité
Posté le 18-03-2009 à 14:59:22  profilanswer
 

n°1863158
stealth35
Posté le 18-03-2009 à 15:37:59  profilanswer
 

bon c'est vraiment a l'arrache mais ca doit etre ce que tu veux
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5.  <title>test table</title>
  6.  <style type="text/css" media="all">
  7.   body {
  8.    font: 12px Myriad,Helvetica,Tahoma,Arial,clean,sans-serif;
  9.   }
  10.   #request{
  11.    position:absolute;
  12.    z-index:10;
  13.    border-collapse:collapse;
  14.    width:500px;
  15.   }
  16.   #request td{
  17.    border:1px solid #d0d0d0;
  18.    padding:3px;
  19.   }
  20.   #autocomplete{
  21.    position:absolute;
  22.    background-color:#ffffff;
  23.    border:1px solid #c0c0c0;
  24.    list-style-type:none;
  25.    margin: -1px 0 0 0;
  26.    padding:0 0 0 0;
  27.    width:200px;
  28.    z-index:100;
  29.   }
  30.   #autocomplete li{
  31.    padding:2px;
  32.    cursor:pointer;
  33.   }
  34.   #autocomplete li:hover{
  35.    background-color:#ddddff;
  36.   }
  37.  </style>
  38. </head>
  39. <body>
  40.  <script type="text/javascript">
  41.   // <![CDATA[
  42.      if (window.addEventListener){
  43.     window.addEventListener("load", addOnLoad, true);
  44.    } else if (window.attachEvent) {
  45.     window.attachEvent("onload", addOnLoad);
  46.    }
  47.    var buffer;
  48.    var table;
  49.    var autocomplete;
  50.    function addOnLoad() {
  51.     table = document.getElementById('request');
  52.     autocomplete = document.getElementById('autocomplete');
  53.     autocomplete.style.display = 'none';
  54.     for(var i in table.getElementsByTagName('tr')){
  55.      var tr = table.getElementsByTagName('tr')[i];
  56.      if(tr.tagName == 'TR'){
  57.       var text = tr.getElementsByTagName('td')[1].innerHTML;
  58.       autocomplete.innerHTML += '<li onclick="click(' + i + ');">' + text + '</li>';
  59.      }
  60.     }
  61.    }
  62.    function getData(value){
  63.     if(value == ''){
  64.      autocomplete.style.display = 'none';
  65.     }else{
  66.      autocomplete.style.display = '';
  67.     }
  68.     var count = 0;
  69.     for(var i in autocomplete.getElementsByTagName('li')){
  70.      var tr = autocomplete.getElementsByTagName('li')[i];
  71.      if(tr.tagName == 'LI'){
  72.       var text = tr.innerHTML;
  73.       var is = text.indexOf(value, 0);
  74.       if(is > -1){
  75.        count++;
  76.        tr.style.display = '';
  77.       }else{
  78.        tr.style.display = 'none';
  79.       }
  80.      }
  81.     }
  82.     if(count == '0'){
  83.      autocomplete.style.display = 'none';
  84.     }
  85.    }
  86.    function click(event){
  87.     var tr = document.getElementById('request').getElementsByTagName('tr')[event];
  88.     var text = tr.getElementsByTagName('td')[1].innerHTML;
  89.     document.getElementById('query').value = text;
  90.     document.getElementById('autocomplete').style.display = 'none';
  91.     var table = document.getElementById('request');
  92.     if((buffer != null) && (buffer !== event)){
  93.      table.getElementsByTagName('tr')[buffer].style.backgroundColor = '#ffffff';
  94.     }
  95.     table.getElementsByTagName('tr')[event].style.backgroundColor = '#eeeeff';
  96.     buffer = event;
  97.    }
  98.   // ]]>
  99.  </script>
  100.  <input type="text" name="query" id="query" value="" onkeyup="getData(this.value)" onfocus="getData(this.value)"/><ul id="autocomplete"></ul>
  101.  <h2>Liste</h2>
  102.  <table id="request" border="0">
  103.   <tr><td>1</td><td>test 1</td></tr>
  104.   <tr><td>2</td><td>test 2</td></tr>
  105.   <tr><td>3</td><td>test 3</td></tr>
  106.   <tr><td>4</td><td>test 4</td></tr>
  107.   <tr><td>5</td><td>test 5</td></tr>
  108.   <tr><td>6</td><td>test 6</td></tr>
  109.   <tr><td>7</td><td>test 7</td></tr>
  110.   <tr><td>8</td><td>bla </td></tr>
  111.   <tr><td>9</td><td>sqdsqdqsd</td></tr>
  112.   <tr><td>10</td><td>tegrgsdfg</td></tr>
  113.   <tr><td>11</td><td>tesdfsdfsfs</td></tr>
  114.  </table>
  115. </body>
  116. </html>


Message édité par stealth35 le 18-03-2009 à 17:24:13
n°1863280
stealth35
Posté le 18-03-2009 à 17:25:26  profilanswer
 

mince ca marche pas sous IE, grrrr


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  PHP

  Barre de rechrche sur une page HTML

 

Sujets relatifs
Batch avec HTML[HTML] Créer un bouton ouvrant un fichier
Convertir en html ?[word] Compter les lignes d'une page, savoir si une image est présente
Fenêtre qui s'ouvre sur la page d'acceuilsi >10 commentaires alors nouvelle page
Question de noob html, css... (javascript??)Recherche rapide sans rechargement de page avec mysql
[html] div ne se redimensionne pas avec le contenu [résolu]Imprimer une page HTML
Plus de sujets relatifs à : Barre de rechrche sur une page HTML


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR