[AJAX] Afficher les données d'une base SQL

Bonjour,

J'ai créé à l'aide d'un tuto un menu déroulant en auto complétion.

Tout fonctionne parfaitement bien.

Je sélectionne un contact dans un menu déroulant (le menu déroulant affiche son nom, prénom et sa photo).

Cependant, lorsque le résultat s'affiche en dessous du menu déroulant, je souhaiterai pouvoir afficher davantage d'informations que celles qui sont dans le le menu déroulant. Par exemple, son adresse mail, téléphone... sous forme de fiche bien visible.

Malheureusement j'ai beau chercher, je ne vois pas où changer le code.

Merci par avance.

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<?php
	if(isset($_POST['chef'])){
		header('Content-type: text/html; charset=iso-8859-1');
		// on inclut la connexion
		mysql_connect('localhost', 'root', '');
		mysql_select_db('bdannonces2');
 
		// on fait la requête
		$sql = "SELECT `nom`, `prenom`, `idadherent`,'pseudo'
				FROM `tadherents`
				WHERE `nom` LIKE '".$_POST['chef']."%'";
		$req = mysql_query($sql);
 
		$i = 0;
		echo '<ul class="contacts">';
		// on boucle sur tous les éléments
		while($autoCompletion = mysql_fetch_assoc($req)){
			echo '
			<li class="contact"><div class="image"><img src="personne/'.$autoCompletion['idadherent'].'-mini.jpg"/></div><div class="nom">'.$autoCompletion['nom'].'</div>
			<div class="prenom">
			<span class="informal">'.$autoCompletion['prenom'].'</span>
			</div>
 
			</li>';
			// on s'arrête s’il y en a trop
			if (++$i >= 10)
				die('<li>...</li></ul>');
		}
		echo '</ul>';
		die();
	}
?>
<!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">
<head>
<title>Une autocompletion avancée en AJAX</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<script type="text/javascript" src="autocompletion.js"></script>
<style type="text/css">
body{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align: justify;
	font-size: 12px;
	color: #565656;
}
 
img {
    border: none;
} 
 
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Autocompletion */
.update{
	position:absolute;
	width:250px;
	background-color:white;
	border:1px solid #888;
	margin:0px;
	padding:0px;
}
 
ul.contacts  {
	list-style-type: none;
	margin:0px;
	padding:0px;
	text-align: left;
}
ul.contacts li.selected { background-color: #ffb; cursor: pointer; }
li.contact {
	list-style-type: none;
	display:block;
	margin:0;
	padding:2px;
	height:32px;
}
li.contact div.image {
	float:left;
	width:32px;
	height:32px;
	margin-right:8px;
}
li.contact div.nom {
	font-weight:bold;
	font-size:12px;
	line-height:1.2em;
}
</style>
</head>
<body>
 
 
<br/>
<form action="?" method="post" onsubmit="return false;">
	<label for="chef">Chef : </label>
	<input type="input" name="chef" id="chef" value="" />
	<div class="update" id="chef_update"></div>
	<input type="hidden" name="chef_id" id="chef_id" value="" /> 
</form>
<br/>
Numéro de la personne avec son nom : <span id="chef_log"></span>
 
<script type="text/javascript">
new Ajax.Autocompleter ('chef',
						'chef_update',
						'autocompletion.php',
						{
							method: 'post',
							paramName: 'chef',
							afterUpdateElement: ac_return
						});
</script>
 
</body>
</html>