<div><input type="text" name="adresseMail"
id="adresseMail" onkeyup="getMails();" /></div>
<div id="poss"></div>
function getMails() {
if (document
.getElementById('adresseMail').value.length > 0) {
var adresseMail = document.getElementById("adresseMail").value;
http.open("GET", url + escape(adresseMail),
true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
}
else {
document.getElementById('poss').innerHTML
= "";
}
}
<?php
$recherche = $_GET['q'];
$chaine = "";
@$db = mysql_pconnect('localhost', 'root', '');
@mysql_select_db('test');
$req = "SELECT user_email FROM users WHERE user_email LIKE '".$recherche."%';";
$res = mysql_query($req);
$row = mysql_fetch_row($res);
if ($row) {
$chaine .= $row[0];
while ($row = mysql_fetch_row($res)) {
$chaine .= ",".$row[0];
}
}
echo $chaine;
?>
function handleHttpResponse() {
if (http.readyState == 4) {
results = http.responseText.split(",");
chaine = "";
for (p in results) {
chaine += "<a href=javascript:completion('";
chaine += trim(results[p]);
chaine += "')>";
chaine += trim(results[p]);
chaine += "</a><br/>";
}
document.getElementById('poss').innerHTML
= chaine;
}
}
function completion(mot) {
document.getElementById('adresseMail').value = mot;
} |
L'un des avantages d'avoir accès au serveur, et à la base
de données attenante, est d'accéder à toutes les entrées précédentes
d'un formulaire, et donc de pouvoir faire gagner du temps
à l'utilisateur en lui proposant, lors du remplissage d'un
champ, de le compléter avec l'une de ses précédentes entrées.
Cette idée est utilisée par GMail pour afficher
les adresses e-mail stockées correspondant à l'entrée
en cours.
Nous utiliserons ici l'événement onkeyup,
qui se déclenche dès que l'utilisateur presse une touche puis
la relâche. Ainsi, à chaque nouvelle lettre entrée dans le
champ, une requête sera lancée auprès du serveur SQL.
Celui-ci
prend donc le risque d'être rapidement submergé, donc cette
fonctionnalité n'est à implémenter que si le serveur peut
tenir la charge.
Accessoirement, nous avons limité le lancement
de la recherche à partir de deux caractères entrés - libre
à vous de changer cette limite.
Notre fonction getMails()
reste classique, sauf que nous y incluons le test du nombre
de lettres.
getMails.php
renvoie les adresses adéquates dans une chaîne, séparées par
des virgules.
Enfin, handleHttpResponse()
se charge de placer ces chaînes dans le div
que nous avons placé sous le champ texte.
Celle-ci fait appel à la fonction completion(),
qui recopie l'adresse dans le champ. |
