[AJAX] afficher les enregistrements au fur et a mesure de la saisie

**fabien14** · 04/06/2009, 19h14

Bonjour,

J'ai un simple formulaire dans lequel j'ai un champs NOM et URL, je voudrais savoir si il est possible de vérifier si le nom est deja dans une table SQL et pareil pour URL si c'est aussi dans une autre table.

Et d'afficher un div afin de nous afficher les différent résultat ?

Voici le formulaire :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<form method="post" name="formulaire" >
	<p class="double">
		<label>Nom </label> 
<input type="text" name="nom" >
	</p>
 
	<p class="double">
		<label>URL :</label>
<textarea rows="5" name="URL" ></textarea>	
	</p>
</form>

Je souhaiterai faire en sorte qu'en fonction de la personne ecrit le nom apparaisse les résultat pour voir les résultats de la requete a partir de la table TEST

Code :

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

1
2
3
4
5
6
7
[php]CREATE TABLE `test` (
  `id` int(11) NOT NULL auto_increment,
  `nom` varchar(200) collate latin1_german2_ci NOT NULL default '',
  `URL` text collate latin1_german2_ci NOT NULL,
  `adresse` text collate latin1_german2_ci NOT NULL,
  PRIMARY KEY  (`id`)
) ;[/php]

Admettons dans le champs nom il existe une entrée qui est égal a Maurice si la personne ecrit Maurice je voudrais que sa m'affiche dans un DIV toutes les enregistrement ou il y a maurice comme nom.

Merci de votre aide

**sabotage** · 04/06/2009, 19h29

Il te suffit de faire un SELECT sur ta table avec comme critère ce que l'utilisateur a mis dans le formulaire et d'afficher les résultats de la requete.

**fabien14** · 04/06/2009, 20h17

Envoyé par sabotage

Il te suffit de faire un SELECT sur ta table avec comme critère ce que l'utilisateur a mis dans le formulaire et d'afficher les résultats de la requete.

Merci de ta réponse, cependant c'est bien le but de mon message ... je ne sais pas comment faire pour reprendre la valeur de l'INPUT et faire en sorte que le résultat s'affiche dans un div.

**sabotage** · 04/06/2009, 20h32

Tu veux dire que tu veux que la recherche se fasse au fur et a mesure de la frappe au clavier ?
Essai de decrire plus precisemment ce que tu veux obtenir.

**fabien14** · 04/06/2009, 23h35

Bonjour,

Oui je voudrais qu'au fur a mesure que nous ecrivions dans le INPUT il affiche un DIV avec tous les enregistrement ayant le nom "Maurice" par exemple.

Ceci pour éviter les doublon dans la base de donnée.

**andry.aime** · 05/06/2009, 08h49

Salut,
Voici un tutoriel sur l'autocomplétion:

http://dcabasson.developpez.com/arti...ion-pas-a-pas/

**fabien14** · 05/06/2009, 23h31

Bonjour,

J'ai regardé et j'ai essayé d'adapter un script qui fonctionne a peu prêt.

Si je met le nom dans le INPUT il me dit que le pseudo est utilisé cependant moi je voudrais que sa m'affiche via un while ($c=@mysql_fetch_array($result)) { les résultats différent dans le DIV... mais je bloque complètement

Si vous pourriez m'aider

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
<form method="post" name="formulaire" >
 
	<p class="double">
		<label>Nom :</label>
<input type="text" name="nom_orga" onKeyUp="verifnom(this.value)" >	</p>
<div id="nombox"></div>
 
 
<script type="text/javascript">
function writediv(texte)
{
document.getElementById('nombox').innerHTML = texte;
}
 
function verifnom(nom_orga)
{
if(nom_orga != '')
{
if(nom_orga.length<2)
writediv('<span style="color:#cc0000"><b>'+nom_orga+' :</b> ce pseudo est trop court</span>');
else if(nom_orga.length>30)
writediv('<span style="color:#cc0000"><b>'+nom_orga+' :</b> ce pseudo est trop long</span>');
else if(texte = file('http://www.site.com/verifnom.php?nomlist='+escape(nom_orga)))
{
if(texte == 1)
writediv('<span style="color:#cc0000"><b>'+nom_orga+' :</b> ce pseudo est deja pris</span>');
else if(texte == 2)
writediv('<span style="color:#1A7917"><b>'+nom_orga+' :</b> ce pseudo est libre</span>');
else
writediv(texte);
}
}
 
}
 
function file(fichier)
{
if(window.XMLHttpRequest) // FIREFOX
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // IE
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else
return(false);
xhr_object.open("GET", fichier, false);
xhr_object.send(null);
if(xhr_object.readyState == 4) return(xhr_object.responseText);
else return(false);
}
</script>

Et voici le fichier verifnom.php

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
<?php
 
// CONNECION SQL
mysql_connect("xxxxx", "xxxxx", "xxxxx");
mysql_select_db("xxxxxx");
 
// VERIFICATION
 
$aujourdui = date('Y-m-d');     
$result = mysql_query("SELECT nom_orga FROM nom WHERE nom_orga = '".$_GET["nomlist"]."' AND (date_fin >= '$aujourdui' OR nodate='1') ORDER BY id DESC LIMIT 1 ");
 
if(mysql_num_rows($result)>=1)
echo "1";
else
echo "2";
?>

**emmanuel.remy** · 06/06/2009, 00h35

Oui je voudrais qu'au fur a mesure que nous ecrivions dans le INPUT il affiche un DIV avec tous les enregistrement ayant le nom "Maurice" par exemple.

Au delà de l'info que tu vas afficher, il ne faut pas oublier que ton application ne fonctionne pas seulement en local... Donc ce n'est certainement pas une bonne conception d'imaginer appeler un script sur ton server, à travers le réseau, à chaque appui sur une touche... Tu risques de bloquer l'application si tu es synchrone et inversement de perdre le fil des données en mode asynchrone.

ERE

**fabien14** · 06/06/2009, 01h38

Ok donc je pense qu'il faut mieux que sa soit au Clik pour afficher les résultats

Alors j'ai refait des petites modif mais le problème est que je ne sais pas comment afficher le résultat d'une requete SQL avec XMLHttpRequest

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
<p class="double">
		<label>Nom du site organisateur :</label>
<input type="text" name="nom_orga" onclick="verifnom(this.value)" >	</p>
<div id="nombox"></div>



<script type="text/javascript">
function writediv(texte)
{
document.getElementById('nombox').innerHTML = texte;
}


function verifnom(nom_orga)
{
if(texte = file('http://www.site.com/verifnom.php?nomlist='+escape(nom_orga)))
{
AFFICHER LE RESULAT DE LA REQUETE ICI ?
}
}


function file(fichier)
{
if(window.XMLHttpRequest) // FIREFOX
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // IE
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else
return(false);
xhr_object.open("GET", fichier, false);
xhr_object.send(null);
if(xhr_object.readyState == 4) return(xhr_object.responseText);
else return(false);
}
</script>

et voici le fichier verifnom.php

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
 
 
<?php
 
// CONNECION SQL
mysql_connect("xxxxx", "xxxx", "xxxx");
mysql_select_db("xxxxxx");
 
// VERIFICATION
 
$result = mysql_query("SELECT * FROM nom WHERE nom_orga = '".$_GET["nomlist"]."'  ORDER BY id ");
 
while ($c=@mysql_fetch_array($result)) {
 
MON CODE QUI AFFICHE LES RESULTATS
 
}
?>

**emmanuel.remy** · 06/06/2009, 09h41

Salut,
Tu ne devrais pas vérifier la saisie du nom sur le click

mais plutôt quand tu quittes ta zone onblur.
Et tu devrais mettre ton appel AJAX asynchrone, parce que s'il dure 3 secondes...

Pour le reste, dans ton code php:

Code :

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

1
2
3
4
5
6
7
8
9
 
//par exemple tu affiches une liste des noms
$res ="<ul>";
while ($c=@mysql_fetch_array($result)) {
     $res .= "<li>".$c["champ1"]."</li>";
 }
$res .= "</ul>";
//tu envoies le résultat
echo $res;

et du côté HTML tu fais un innerHTML comme ton code l'a prévu.

ERE

**fabien14** · 06/06/2009, 13h42

Bonjour,

merci de ta réponse,

JE ne connaisais pas Onblur

c'est pas mal en effet comme ceci

Cependant je connais trés peu l'AJAX et je vois pas ceux que tu veut dire par : appel AJAX asynchrone

**emmanuel.remy** · 06/06/2009, 21h04

Envoyé par fabien14

Bonjour,

merci de ta réponse,

JE ne connaisais pas Onblur

c'est pas mal en effet comme ceci

Cependant je connais trés peu l'AJAX et je vois pas ceux que tu veut dire par : appel AJAX asynchrone

Si tu fais un appel asynchrone, alors ton code n'est pas bloqué il continue à s'exécuter, à l'inverse de l'appel synchrone où ton code attend la réponse du server.

Excellentes infos dans ce tutoriel.

ERE

**fabien14** · 07/06/2009, 10h24

Bonjour,

Merci pour ta réponse, je viens de comprendre les 2 modes

J'ai modifié ma requête, mais je n'arrive pas a afficher le résultat ...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function writediv(texte)
{
document.getElementById('nombox').innerHTML = texte;
}
 
 
function verifnom(nom_orga)
{
if(texte = file('http://www.site.com/verifnom.php?nomlist='+escape(nom_orga)))
{
writediv('<?php echo $res; ?> ');
 
}
}

Voici le fichier verifnom.php.

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
<?php
 
 
$res ="<ul id=\"navlistm\">";
mysql_connect("xxxxx", "xxxx", "xxxxx");
mysql_select_db("xxxxxxx");
 
$result = mysql_query("SELECT * FROM nom WHERE nom_orga = '".$_GET["nomlist"]."' ");
 
while ($c=@mysql_fetch_array($result)) {
 
  
$res .= "<li >.$c[nom_orga].<strong>.$c[telo].</strong></a></li>";
 
}
 
$res .= "</ul><p class=\"last\"></p></dd></dl></div>";
 
echo $res;
 
?>

Merci de votre aide

**emmanuel.remy** · 07/06/2009, 12h26

Tu es toujours synchrone et tu t'emmêles avec le code PHP côté server et celui côté client: tu ne peux écrire

Code :

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

writediv('<?php echo $res; ?> ');

, le code PHP ici n'est pas celui retourné par l'appel AJAX.

En utilisant le tutoriel recommandé voilà une piste :

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
function file(fichier)
{
  if(window.XMLHttpRequest) // FIREFOX
     xhr_object = new XMLHttpRequest();
  else if(window.ActiveXObject) // IE
       xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
  else
       return(false); 

  xhr_object.open("GET", fichier, true);
  //fonction de traitement de l'évolution de la requête
  xhr_object.onreadystatechange = function(){
  // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
      if(xhr_object.readyState == 4 && xhr_object.status == 200){
            writediv(xhr_object.responseText);
      }
   }

  xhr_object.send(null);
}
</script>

Et pour ton code PHP, attention à bine mettre les éléments du tableau entre quote $t['aaa'] sinon PHP considère avant tout que aaa est une constante.

Code :

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

1
2
3
4
5
6
while ($c=@mysql_fetch_array($result)) {
 
 
$res .= "<li>{$c['nom_orga']}<strong>{$c['telo']}</strong></li>";
 
}

ERE

**fabien14** · 07/06/2009, 14h11

Bonjour,

J'ai corrigé les erreur

Et ca marche !! merci !

J'ai donc mis ceci en code :

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
function file(fichier)
{
  if(window.XMLHttpRequest) // FIREFOX
     xhr_object = new XMLHttpRequest();
  else if(window.ActiveXObject) // IE
       xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
  else
       return(false); 
 
  xhr_object.open("GET", fichier, true);
  //fonction de traitement de l'évolution de la requête
  xhr_object.onreadystatechange = function(){
  // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
      if(xhr_object.readyState == 4 && xhr_object.status == 200){
            writediv(xhr_object.responseText);
      }
   }
 
  xhr_object.send(null);
}
 
</script>

et dans l'affichage j'ai mis :

Code :

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

1
2
3
4
5
6
7
8
function verifnom(nom_orga)
{
if(texte = file('http://www.site.com/verifnom.php?nomlist='+escape(nom_orga)))
{
            writediv('xhr_object.responseText');
 
}
}

**emmanuel.remy** · 07/06/2009, 15h11

Code :

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

1
2
3
4
function verifnom(nom_orga)
{
file('http://www.site.com/verifnom.php?nomlist='+escape(nom_orga));
}

ERE

[AJAX] afficher les enregistrements au fur et a mesure de la saisie

AJAX

Discussions similaires

Partager

Partager