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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Filtrer des résultats d'une recherche sans rafraîchir toute la page

idy

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.

Publicité

anapajari

s/travail/glanding on hfr/gs;

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

idy

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

gatsu35

Blablaté par Harko

Citation :

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

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
Récupération d'information d'une page HMTL	[Résolu][ASP.NET 2.0][C#] Plusieurs load pour une meme page
Récupérer résultats d'une recherche	Charger une page dans un div?
Panneau coulissant venant de dehors la page ?	Envoyer un mail (pas avec mailto) depuis une page JSP
Ouvrir une page dans un <div id=""> en XHTML ?	Recherche controle utilisateur "jauge"
Recherche de fichiers
Plus de sujets relatifs à : Filtrer des résultats d'une recherche sans rafraîchir toute la page

Page générée en 0.090 secondes