PHP

Barre de rechrche sur une page HTML

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Barre de rechrche sur une page HTML

johnson950

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

Publicité

stealth35

t'as une base de donnée derriere ?

johnson950

non

rufo

Pas me confondre avec Lycos!

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

stealth35

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

rufo

Pas me confondre avec Lycos!

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).

stealth35

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

johnson950

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

stealth35

genre auto completion ?

johnson950

oui

Publicité

stealth35

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

stealth35

mince ca marche pas sous IE, grrrr

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'acceuil	si >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

Page générée en 0.139 secondes