Filtrer des résultats d'une recherche sans rafraîchir toute la page

Marsh Posté le 12-09-2006 à 14:27:03

J'essaye de filtrer les résultats dynamiquement d'une requête PHP/MySQL. Merci pour votre aide.

[1] Table :
Column A | Column B
car | blue
car | red
car | blue
truck | blue
truck | red
truck | green

[2] Barre de recherche : recherche dans colonne A et retourne les résultats trouvés :
si on cherche "car" :
car | blue
car | red
car | blue

Cette étape [2] est une requête PHP/MySQL standard qui ne me pose pas de problème.

[3] Si maintenant un checkbox permet de filtrer les résultats en fonction de la couleur : j'ai essayé de donner le même ID (=couleur) à chaque ligne de résultat, puis rien mis dans le <div> correspondant quand la case est décochée, mais cela ne marche que pour le premier résultat de chaque couleur, chaque ID devant être unique.

C'est un cas assez classique il me semble de rafraîchissement des résultats d'une requête sans rafraîchir toute la page, en javascript / ajax.

Merci beaucoup pour votre aide ou pour les liens vers des bouts de scripts existants.

Reply

Marsh Posté le 12-09-2006 à 14:27:03

Reply

Marsh Posté le 12-09-2006 à 16:21:18

bon j'ai eu besoin d'un truc a peu près similaire y'a pas longtemps, donc j'ai viré plein de truc que te servirait à rien et un peu adapté, ça doit marcher en gros comme tu veux ( mais il doit rester des modifs à faire)...

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" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Exemple</title>
<script type="text/javascript">
function init(){
var trNodes = document.getElementById('results').getElementsByTagName('tr');
var resNodes = new Array();
for(var i=0; i<trNodes.length; i++){
if (trNodes[i].childNodes[0].tagName == 'TH'){
var thNodes = trNodes[i].getElementsByTagName('th');
for(var j=0; j<thNodes.length; j++){
Filter.prototype.fields.push(thNodes[j].innerHTML);
}
} else if ( trNodes[i].childNodes[0].tagName == 'TD'){
resNodes.push(trNodes[i]);
var tdNodes = trNodes[i].getElementsByTagName('td');
for(var j=0;j<tdNodes.length; j++){
trNodes[i].setAttribute(Filter.prototype.fields[j], tdNodes[j].innerHTML);
}
}
}
var cf = new Filter('cf', 'color', resNodes);
var tf = new Filter('tf', 'type', resNodes);
}
function Filter(obj, field, nodes){
this.nodes = nodes;
this.node = document.getElementById(obj)||obj; //gatsu's style
this.node.innerHTML='<option value="">ALL</option>';
var fIndex = Filter.prototype.fields.indexOf(field);
this.values = new Array();
for(var i=0; i<nodes.length; i++){
if ( this.values.indexOf(nodes[i].getElementsByTagName('td')[fIndex].innerHTML) == -1){
this.values.push(nodes[i].getElementsByTagName('td')[fIndex].innerHTML);
var optNode = document.createElement('option');
optNode.value = nodes[i].getElementsByTagName('td')[fIndex].innerHTML;
optNode.innerHTML = nodes[i].getElementsByTagName('td')[fIndex].innerHTML;
this.node.appendChild(optNode);
}
}
var self = this; //mIRROR's style
this.node.onchange = function(e){
self.display(field, this.options[this.options.selectedIndex].value);
}
}
Filter.prototype.display = function (field, value){
Filter.prototype.activeFilters[field] = value;
for(var i=0; i<this.nodes.length; i++){
toDisplay = true;
for(filter in Filter.prototype.activeFilters){
if ( Filter.prototype.activeFilters[filter] != ''){
if (this.nodes[i].getAttribute(filter) != Filter.prototype.activeFilters[filter]){
toDisplay = false;
}
}
}
if( toDisplay){
this.nodes[i].style.visibility = 'visible';
} else {
this.nodes[i].style.visibility = 'hidden';
}
}
}
Filter.prototype.fields = new Array();
Filter.prototype.activeFilters = new Array();
window.onload = init;
</script>
</head>
<body>
<form action="pouet" method="post">
color:
<select name="color" id="cf">
<option value="">ALL</option>
</select>
type:
<select name="type" id="tf">
<option value="">ALL</option>
</select>
</form>
<table id="results" summary="query results">
<tr><th>type</th><th>color</th></tr>
<tr id="r1"><td>car</td><td>blue</td>
<tr id="r2"><td>car</td><td>red</td>
<tr id="r3"><td>car</td><td>green</td>
<tr id="r4"><td>truck</td><td>blue</td>
<tr id="r5"><td>truck</td><td>red</td>
<tr id="r6"><td>truck</td><td>green</td>
</table>
</body>
</html>

Si tu veux des explications sur un point précis demande!
Si tu veux des explications sur tout, je passe mon tour

edit:
Ah oui, l'idée c'est que les "" soient quand même générées par ton serveur, si bien que si le js est desactivé tu aies tout de même des valeurs.
Pour la même raison, si tu valides le formulaire tu ne dois afficher que les bons résultats ( mais coté serveur).

Message édité par anapajari le 12-09-2006 à 16:23:39

Reply

Marsh Posté le 12-09-2006 à 16:55:05

ok cool, je vais étudier tout cela en détail. Merci beaucoup.

Reply

Marsh Posté le 13-09-2006 à 09:54:05

Citation :

this.node = document.getElementById(obj)||obj; //gatsu's style

Reply

Filtrer des résultats d'une recherche sans rafraîchir toute la page

Sujets relatifs:

Leave a Replay