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 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136
| <?php
if(isset($_POST['chef'])){
echo "chef 1 = ".$_POST['chef'];
header('Content-type: text/html; charset=iso-8859-1');
// on inclut la connexion
mysql_connect('localhost', 'root', '');
mysql_select_db('base_apli');
// on fait la requête
$sql = "SELECT Negociateur,Client,Id
FROM apli
WHERE Negociateur 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="nom">'.$autoCompletion['Negociateur'].'</div>
<div class="prenom">
<span class="informal">'.$autoCompletion['Client'].'</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="lib/prototype.js"></script>
<script type="text/javascript" src="lib/scriptaculous.js"></script>
<script type="text/javascript" src="lib/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/>
<?php if(isset($_POST['chef'])) {?>
<form action="?" method="post" onsubmit="return false; ">
<label for="chef">Chef : </label>
<input type="input" name="chef" id="chef" value="" onchange="go"/>
<div class="update" id="chef_update"></div>
<input type="hidden" name="chef_id" id="chef_id" value="" />
</form>
<?php }?>
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