Barre de rechrche sur une page HTML

Marsh Posté le 18-03-2009 à 10:42:35

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

Reply

Marsh Posté le 18-03-2009 à 10:42:35

Reply

Marsh Posté le 18-03-2009 à 11:12:13

t'as une base de donnée derriere ?

Reply

Marsh Posté le 18-03-2009 à 13:31:32

non

Reply

Marsh Posté le 18-03-2009 à 14:11:01

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

Reply

Marsh Posté le 18-03-2009 à 14:12:45

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

Reply

Marsh Posté le 18-03-2009 à 14:18:34

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

Reply

Marsh Posté le 18-03-2009 à 14:40:33

bah ecoute ca marche tres bien

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test table</title>
</head>
<body>
<script type="text/javascript">
// <![CDATA[
if (window.addEventListener){
window.addEventListener("load", addOnLoad, true);
} else if (window.attachEvent) {
window.attachEvent("onload", addOnLoad);
}
function addOnLoad() {
var table = document.getElementById('request');
for(var i in table.getElementsByTagName('tr')){
if(table.getElementsByTagName('tr')[i].style)
table.getElementsByTagName('tr')[i].style.display = 'none';
}
}
function getData(value){
var table = document.getElementById('request');
for(var i in table.getElementsByTagName('tr')){
var tr = table.getElementsByTagName('tr')[i];
var text = tr.getElementsByTagName('td')[1].innerHTML;
var is = text.indexOf(value, 0);
if(is > -1){
tr.style.display = '';
}else{
tr.style.display = 'none';
}
}
}
// ]]>
</script>
<input type="text" name="query" value="" onkeyup="getData(this.value)"/>
<table id="request" border="1">
<tr><td>1</td><td>test 1</td></tr>
<tr><td>2</td><td>test 2</td></tr>
<tr><td>3</td><td>test 3</td></tr>
<tr><td>4</td><td>test 4</td></tr>
<tr><td>5</td><td>test 5</td></tr>
<tr><td>6</td><td>test 6</td></tr>
<tr><td>7</td><td>test 7</td></tr>
<tr><td>8</td><td>bla </td></tr>
<tr><td>9</td><td>sqdsqdqsd</td></tr>
<tr><td>10</td><td>tegrgsdfg</td></tr>
<tr><td>11</td><td>tesdfsdfsfs</td></tr>
</table>
</body>
</html>

Message édité par stealth35 le 18-03-2009 à 14:40:44

Reply

Marsh Posté le 18-03-2009 à 14:47:33

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 !!

Reply

Marsh Posté le 18-03-2009 à 14:49:04

genre auto completion ?

Reply

Marsh Posté le 18-03-2009 à 14:59:22

oui

Reply

Marsh Posté le 18-03-2009 à 14:59:22

Reply

Marsh Posté le 18-03-2009 à 15:37:59

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

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test table</title>
<style type="text/css" media="all">
body {
font: 12px Myriad,Helvetica,Tahoma,Arial,clean,sans-serif;
}
#request{
position:absolute;
z-index:10;
border-collapse:collapse;
width:500px;
}
#request td{
border:1px solid #d0d0d0;
padding:3px;
}
#autocomplete{
position:absolute;
background-color:#ffffff;
border:1px solid #c0c0c0;
list-style-type:none;
margin: -1px 0 0 0;
padding:0 0 0 0;
width:200px;
z-index:100;
}
#autocomplete li{
padding:2px;
cursor:pointer;
}
#autocomplete li:hover{
background-color:#ddddff;
}
</style>
</head>
<body>
<script type="text/javascript">
// <![CDATA[
if (window.addEventListener){
window.addEventListener("load", addOnLoad, true);
} else if (window.attachEvent) {
window.attachEvent("onload", addOnLoad);
}
var buffer;
var table;
var autocomplete;
function addOnLoad() {
table = document.getElementById('request');
autocomplete = document.getElementById('autocomplete');
autocomplete.style.display = 'none';
for(var i in table.getElementsByTagName('tr')){
var tr = table.getElementsByTagName('tr')[i];
if(tr.tagName == 'TR'){
var text = tr.getElementsByTagName('td')[1].innerHTML;
autocomplete.innerHTML += '<li onclick="click(' + i + ');">' + text + '</li>';
}
}
}
function getData(value){
if(value == ''){
autocomplete.style.display = 'none';
}else{
autocomplete.style.display = '';
}
var count = 0;
for(var i in autocomplete.getElementsByTagName('li')){
var tr = autocomplete.getElementsByTagName('li')[i];
if(tr.tagName == 'LI'){
var text = tr.innerHTML;
var is = text.indexOf(value, 0);
if(is > -1){
count++;
tr.style.display = '';
}else{
tr.style.display = 'none';
}
}
}
if(count == '0'){
autocomplete.style.display = 'none';
}
}
function click(event){
var tr = document.getElementById('request').getElementsByTagName('tr')[event];
var text = tr.getElementsByTagName('td')[1].innerHTML;
document.getElementById('query').value = text;
document.getElementById('autocomplete').style.display = 'none';
var table = document.getElementById('request');
if((buffer != null) && (buffer !== event)){
table.getElementsByTagName('tr')[buffer].style.backgroundColor = '#ffffff';
}
table.getElementsByTagName('tr')[event].style.backgroundColor = '#eeeeff';
buffer = event;
}
// ]]>
</script>
<input type="text" name="query" id="query" value="" onkeyup="getData(this.value)" onfocus="getData(this.value)"/><ul id="autocomplete"></ul>
<h2>Liste</h2>
<table id="request" border="0">
<tr><td>1</td><td>test 1</td></tr>
<tr><td>2</td><td>test 2</td></tr>
<tr><td>3</td><td>test 3</td></tr>
<tr><td>4</td><td>test 4</td></tr>
<tr><td>5</td><td>test 5</td></tr>
<tr><td>6</td><td>test 6</td></tr>
<tr><td>7</td><td>test 7</td></tr>
<tr><td>8</td><td>bla </td></tr>
<tr><td>9</td><td>sqdsqdqsd</td></tr>
<tr><td>10</td><td>tegrgsdfg</td></tr>
<tr><td>11</td><td>tesdfsdfsfs</td></tr>
</table>
</body>
</html>

Message édité par stealth35 le 18-03-2009 à 17:24:13

Reply

Marsh Posté le 18-03-2009 à 17:25:26

mince ca marche pas sous IE, grrrr

Reply

Barre de rechrche sur une page HTML

Sujets relatifs:

Leave a Replay