Affichage de tableau avec recherche

**jpower** · 27/08/2007, 15h41

Je vous explique ce que je veux faire.

Quand la page ouvre j'ai un tableau HTML qui se remplit avec du stock dans une BD. Je voudrais pour voir mettre un champ en haut d'une collone par exemple dans lequel une personne pourrait taper quelquechose pour faire une recherche et que dynamiquement le tableau se réduit avec les lignes correspondante.

Dans le fond disons que j'ai une collone de # de produit .... si la personne tape 123 .... elle va sortir les # produit commencant par 123.

Le best serait que au fur et à mesure que la personne tape exemple 1....2....3 les lignes disponible diminue directement en taper 1 et ainsi du suite.

Si quelqu'un peut m'aider pour faire ça je serais réellement trop heureux.

**beeboo** · 27/08/2007, 15h59

Salut, pour celà, l'Ajax est ton ami et il existe une très belle bibliothèque javascript libre et conforme aux standards qui te fournira tout ce dont tu as besoin : http://prototypejs.org. Et http://wiki.script.aculo.us et particulièrement la méthode Autocompletion

**ryan** · 27/08/2007, 20h35

Yop!

Il est possible de tout faire en Javascript, donc sans effectuer de nouvelles requêtes sur la BDD.

A première vue, cela semble assez simple à réaliser, une dizaine de lignes de code...

**jpower** · 27/08/2007, 20h39

Je suis pas certain de tout a fait comprendre par contre .... si quelqu'un aurait un exemple concret à me montrer ce serait super.

Je vais prendre plus de temps pour lire les liens proposés aussitôt que possible aussi.

**ryan** · 27/08/2007, 20h53

Yop!

Une solution 100% Javascript:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
<html>
<head>
<script type="text/javaScript">	  
function skim(thedigits)
{
  var thetable = document.getElementById("mytable");
  var therows = thetable.getElementsByTagName("tr");	
  for (i=0; i<therows.length; i++)
  {
    if (therows.item(i).getElementsByTagName("td").item(0).innerHTML.indexOf(thedigits) != 0) 
    {
      thetable.deleteRow(i);
      i--;
    }  
  }
}		
</script>
</head>
<body>  
<table id="mytable" border=1>
<tr><td>4587<td>bla bla 1
<tr><td>1465<td>bla bla 2
<tr><td>1254<td>bla bla 3
<tr><td>1235<td>bla bla 4
<tr><td>1234<td>bla bla 5
<tr><td>5734<td>bla bla 6
</table>
<form>
<input type=text name="digits" value="" onKeyUp="skim(this.value)" />
</form>
</body>
</html>

Bon, on pourrait être plus élégant et utiliser les noeuds...

**jpower** · 27/08/2007, 21h08

Est-ce que au lieu de supprimer la ligne complètement je ne pourrais pas tout simplement faire une hide des TR que je ne veux pas voir en mettant la propriété du style.display a "none".

Pis dans le fond le code que tu viens de me fournir c'est très bon mais c'est ok si je mets un chiffre dans le input text et c'est tout ? ou ca marche même si je met 2 chiifre ou plus ? Dans le fond la propriété indexof recherche un occurence de quelque chose ? Si c'est le cas merveilleux !

**ryan** · 27/08/2007, 21h17

Yop!

Bin tu entres 1 dans le champ texte et certains TR disparaissent. Tu continues en ajoutant un 2 et d'autres TR disparaissent et ainsi de suite jusqu'à ce qui tu rentres 1234 et qu'il ne te reste plus qu'un seul TR.

**jpower** · 27/08/2007, 21h32

ouais c'est sure mais tu ne peux pas revenir en arrière par contre.... la est le problème.

Si on pourrait utiliser un hide de la ligne au lieu de la supprimer ce serait parfait.

**jpower** · 27/08/2007, 21h47

En plu je viens d'essayer et ça ne semble pas faire le travail et je crois que dans ton code tu ne ferme pas tes TD en passant.

**ryan** · 28/08/2007, 08h00

Deux choses gamin:

- le code fait ce qui tu décrivais, et s'il ne fait pas ce que tu voulais, pas de ma faute si tu ne t'exprimes pas clairement.
- quand j'écris une page HTML destinée à être publiée, elle passe le validateur, mais quand j'écris une petite page destinée à illustrer un bout de code, je fais au plus court.

Et tant qu'à pinailler, tu ne l'as vu, mais je n'ai pas fermé les TR non plus.

**javatwister** · 28/08/2007, 09h59

autre exemple en images?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!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" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>...</title>
 
 
<style type="text/css">
 
#t {display:table;
border-collapse:collapse;
margin: 100px 0px 50px 100px;
}
 
#t td, th {
border:#000 2px solid;
}
 
#t th {
background-color:#f00;
}
 
</style>
 
 
</head>
 
<body>
 
<table id="t">
	<tr>
		<th>colonne 1</th><th>colonne 2</th>
	</tr>
	<tr>
		<td><input type="text" /></td><td><input type="text" /></td>
	</tr>
 
	<tr><td>truc</td><td>10</td></tr>
	<tr><td>machin</td><td>12</td></tr>
	<tr><td>bidule</td><td>27</td></tr>
	<tr><td>chose</td><td>270</td></tr>
	<tr><td>chouette</td><td>57</td></tr>
	<tr><td>machine</td><td>0</td></tr>
	<tr><td>bidouille</td><td>3120</td></tr>
	<tr><td>tactique</td><td>555</td></tr>
</table>
 
 
<script type="text/javascript">
 
 
var t=document.getElementById("t");
var ch=t.getElementsByTagName("input");
 
for(i=0;i<2;i++){// 2 représente le nombre de champs texte, donc, de colonnes
	ch[i].ind=i;
	ch[i].onkeyup=function(){
		for(j=2;j<t.rows.length;j++){
			if(this.value.replace(/\s/g,"")==""){
				t.rows[j].style.display="";// valeur nulle pour compatibilité fox / IE
			}
			else{
				t.rows[j].style.display= (t.rows[j].cells[this.ind].firstChild.data.indexOf(this.value)!=0) ? "none" : "";
			}
		}
	}
}
 
</script>
 
 
</body>
</html>

**Tober** · 28/08/2007, 10h37

Au lieu de critiquer l'aide que te fournis Ryan, tu peux aussi reprendre son code et l'adapté à ce que tu veux faire...
On est pas là pour coder à votre place, mais pour vous aider à le faire quand vous avez cherché et que vous butez

**jpower** · 28/08/2007, 13h42

Je suis désolé je ne voulais aucunement critiquer personne ici et je suis très reconnaissant de l'aide fournit mais j'ai fait des tests pour adpater le code sans succès et disons qu'hier j'étais un peu a bout du a plusieurs problème mais je susi désolé si j'ai vexé quelqu'un.

Merci beaucoup de votre aide je reprend le boulot sérieusement ce matin.

**jpower** · 28/08/2007, 14h01

Bon voilà la preuve que avec un peu de repos que tout va mieux .... voilà ce que j'ai fait finalement grâce à votre aide :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
function recherche(texte)
		{	
			var tbl = document.getElementById("tblProduit");
			var ligne = tbl.getElementsByTagName("tr");
			for(i=1; i<tbl.rows.length; i++)
			{
				if(tbl.rows[i].cells[0].firstChild.data.indexOf(texte) != 0)
				{
					tbl.rows[i].style.display = "none";
				}
				else
				{
					tbl.rows[i].style.display = "";
				}
			}
		}

Encore une fois je suis désolé pour Ryan et encore merci pour ton aide et merci à tout le monde