Easy-Micro


ESPACEMEMBRE AJAX
Complétion Ajax

Technique Ajax de complétion automatique

Une complétion automatique désigne l'opération par laquelle Ajax complète une abréviation. C'est une technique d'accélération de frappe.

Cet exercice demande une base de donnée "mabase" avec une table "clients" avec deux champs, "idclient" (type tiny int 10, unsigned, not null, auto_incement, primary key) et "nom" (type varchar 50) et trois fichiers: index.html, mon_ajax.js et data.php.

Liste déroulante (index.html)

<html>
<head>
<script type="text/javascript" src="mon_ajax.js"></script>
</head>
<body>
<form method="post" action="index.html">
<input type="text" id="nomduinput" onkeyup="ajax();" />
<select name="maliste" id="maliste" style="display:none;"></select>
</form>
</body></html>


Contenu de mon_ajax.js

function ajax() {
// Création objet avec test pour diff. navigateur
var xhr;
if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); }
else if (window.ActiveXObject) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); }

// création d'un gestionaire d'évènement pour les changements d'état
xhr.onreadystatechange = function() { traitement(xhr); };

if (document.getElementById('nomduinput').value != "") {
// On fait la requete avec la méthode open qui prépare une requête en indiquant
// la méthode, l'URL et la drapeau de synchronisation (ici true pour asynchrone)
xhr.open("GET", "data.php?debutnom="+document.getElementById('nomduinput').value, true);
// On effectue la requête avec la méthode send, éventuellement en envoyant les données
xhr.send(null); // null pour dire de ne pas envoyer de données supplémentaire
}
else { // cache la liste si pas de saisie
document.getElementById("maliste").style.visibility = 'hidden';
}
}



function traitement(xhr)
{
// vérifier l'état de la requête avec la propriété readyState (4 = terminé)
if (xhr.readyState==4) {
var docXML= xhr.responseXML;// obtenir la réponse sous forme d'objet XML (DOM)
var items = docXML.getElementsByTagName("client"); // tous les items de clients
if (items.length > 0) {
// affiche la liste
document.getElementById("maliste").style.visibility = 'visible';
document.getElementById("maliste").style.display = 'inline';
// associe la longeur de la liste à la longeur des items (noeuds xml)
document.getElementById("maliste").length = items.length;

// Remplir la liste avec les valeurs du fichiers XML
for (i=0;i<items.length;i++) {
document.getElementById("maliste").options[i].value = items[i].firstChild.nodeValue;
document.getElementById("maliste").options[i].text = items[i].firstChild.nodeValue;
}
} else {
// cache la liste si pas de réponse
document.getElementById("maliste").style.visibility = 'hidden'; }
}
}

Contenu de data.php (à utiliser avec une base MySQL)

<?php
header('Content-Type: text/xml');
// header obligatoire car le fichier XML est envoyé en mémoire vive
echo "<?xml version='1.0' encoding='iso-8859-1' ?>\n";
echo "<clients>\n";

$dbhost="localhost";
$dbuser="root";
$dbpass="";

$dblink=mysql_connect($dbhost,$dbuser,$dbpass);
mysql_select_db("mabase",$dblink);

$requete = "SELECT * FROM clients WHERE nom LIKE '".$_GET["debutnom"]."%' ORDER BY nom";

$resultat = mysql_query($requete,$dblink) or die (mysql_error($dblink));

while ($ligne = mysql_fetch_array($resultat, MYSQL_NUM))
{
echo "<client>" . $ligne[1] . "</client>\n";
}
echo "</clients>";
?>

Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Mercredi 27 mars 2019 - Semaine 13 - Saint Habib (Demain: Saint Gontran)
Aujourd'hui, c'est l'anniversaire de Kad Merad (1964-55 ans), comédien et humoriste français (2008: Bienvenue chez les Ch'tis, 2009: Le petit Nicolas...). Autre 27 mars: 2004 : mort à 96 ans de l'écrivain Robert Merle (né en 1908).
Haut de page Easy-Micro