Il y a des tutoriels sur Ajax sur développez, je te conseille d'aller y jeter un coup d'oeil. Et il y a aussi une section Ajax sur le forum.
Cependant même avec les tutos c'est pas toujours évident, moi j'avais eu du mal à piger tout seul.
Pour faire ton filtre, il faut que tu ajoutes une fonction Ajax à ta page. Pour ce qui est de la syntaxe de la fonction, vas voir dans les tutos.
Tu intègres cette fonction entre les balises <script language='javascript'> et </script> en dehors du code PHP :
1 2 3 4 5 6 7 8 9
| <script language='javascript'>
function TaFonctionAjax() {
...
}
</script>
<?php
...
?> |
Tu rajoutes à ta zone de texte la propriété OnKeyDown (évènement javascript, il existe aussi OnKeyPress ou OnKeyUp) pour faire appel à ta fonction Ajax lors de l'ajout de texte dans la zone :
<input type='text' name='nom' OnKeyDown='TaFonctionAjax();'>
Le principe d'Ajax est de faire appel à une autre page php de façon asynchrone, c'est à dire que tu n'auras pas de rechargement de la page.
Tu peux envoyer des données à cette seconde page php via ta fonction Ajax en méthode get ou post comme pour les formulaires. Dans le cas présent il faudra que tu lui envoies le texte contenu dans la zone de texte.
Cette page php devra sélectionner dans ta base de données tout les éléments concernant les noms commençant par le texte que tu lui auras envoyé.
Ensuite toujours dans cette page php, tu fais un affichage normal des données récupérées dans la base, c'est à dire avec l'utilisation de la fonction echo. L'Ajax recevra tout ce que tu mettras dans tes appels a la fonction echo.
Ta fonction Ajax devra contenir la ligne :
window.document.getElementById('zone_affichage').innerHTML = ta_variable_ajax.responseText;
Cette ligne permet de "réafficher" dans ta première page php les nouvelles données récupérées dans la zone identifiée par l'id "zone_affichage".
C'est à toi de délimiter cette zone dans ta page à l'aide d'une balise <div id='zone_affichage'></div>.
Bon j'ai essayé comme je pouvais de t'expliquer un peu le principe d'Ajax, j'espère que ça te guidera un minimum. Hésites pas à me dire si tu ne comprends pas quelque chose.
Partager