Autocomplétion AJAX

Auteur : Julien Theler - www.twiip.ch
Contact :
Licence : CC-by-nc
Retour à la liste des scripts
1. Description Le système d'autocomplétion s'applique à un champ de texte. Il sert à suggérer à un utilisateur une liste de valeur possible en fonction de ce qu'il a déjà entré dans le champs. Ces valeurs possibles sont retournées depuis une base de données.
Exemple : La base de données contient les valeurs "Arbre", "Abricot", "Bateau", "Soleil". L'utilisateur entre la lettre "a" dans le champs. Les valeurs "Arbre" et "Abricot" lui sont proposées.
2. Fichiers nécessaires autocomplete.js (télécharger) : contient la fonction javascript gérant la récupération des valeurs possibles et leur affichage
autocomplete.css (télécharger) : contient les déclarations CSS gérant le style de la liste des suggestions
autocomplete_ajax.php (télécharger) : contient la requête à la base de données retournant les valeurs possibles
3. Configuration Dans le fichier autocomplete.js
A la ligne 133, adaptez le chemin absolu du fichier autocomplete_ajax.php afin qu'il corresponde à votre arborescence.

Dans le fichier autocomplete_ajax.php
A la ligne 3, une tableau php sert à restreindre les tables et les champs pouvant être interrogés. Complétez cette array de la façon suivante :
	$check = array(
		'nom_de_table' => array('nom_de_champ', 'autre_nom_de_champ'),
		'autre_table' => array('autre_champ')
	);
De cette façon, seuls les champs "nom_de_champ" et "autre_nom de champ" de la table "nom_de_table" ainsi que le champ "autre_champ" de la table "autre_table" pourront être appelés par le fichier php. C'est une mesure de sécurité empêchant de parcourir librement votre base de données.
4. Utilisation La fonction javascript doit être appelée ainsi sur un champ de texte : <input name="name" type="text" autocomplete="off" onKeyUp="suggest(this, 'nom_de_la_table', 'nom_du_champ');" />
5. Exemple Pour l'exemple, les suggestions suivantes sont possibles : Arbre, Arbalète, Arbitre, Arcade, Attester, Branche, Capable, Chanter, Différer, Geste, Gradué, Grand, Homme
Test :