Affichage de tableau avec recherche

Version imprimable

27/08/2007, 15h41
jpower

Affichage de tableau avec recherche

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.
27/08/2007, 15h59
beeboo

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
27/08/2007, 20h35
ryan

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...
27/08/2007, 20h39
jpower

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.

Yop!

Une solution 100% Javascript:

Code:

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

27/08/2007, 21h08
jpower

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 !
27/08/2007, 21h17
ryan

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.
27/08/2007, 21h32
jpower

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.
27/08/2007, 21h47
jpower

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.
28/08/2007, 08h00
ryan

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.

autre exemple en images?

Code:

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>

28/08/2007, 10h37
Tober

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
28/08/2007, 13h42
jpower

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.

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:

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

28/08/2007, 14h58
javatwister

à compléter, sans doute (gestion des saisies "vides", recherche possible sur plusieurs colonnes...;
28/08/2007, 15h28
jpower

Comme tu le dit à compléter mais ça work A1 comme je voulais !

Merci encore.