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