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

**smotte761** · 22/07/2011, 15h54

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 :

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
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>

**mctarek** · 26/07/2011, 11h45

Envoyé par smotte761

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 :

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
<?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();
	}
?>

Pourquoi ne pas agir sur :

Code :

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

<div class="nom">'.$autoCompletion['nom'].'</div> et autre <div class="prenom"><span class="informal">'.$autoCompletion['prenom'].'</span>

en récupérant d'autres données de la table puis les concaténer si besoin est ?

Ex :

Code :

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

'<div class="nom">'.$autoCompletion["nom"].'('.$autoCompletion['login'].')'.'</div>'

ou si l'idée consiste à afficher ses données supplémentaires ailleurs sur la page, prévoir une

Biensûr, cela signifie ici que vous avez login dans la réponse SQL...
Suis je encore dans le sujet ?
mctarek

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

AJAX

Discussions similaires

Partager

Partager