Voici un plugin jQuery facilitant l’autocompletion.
Les scripts + les images
autocomplete_V1.0.0.zip
Exemple
$(document).ready(function() {
$("#txt_generic").autocomplete(
"generic.ashx",
{delay:300, minChars:3, width:200,
path_imgValide:'images/Valide.png', path_imgNonValide:'Images/NonValide.png',
id_hiddenfield:'hid_generic', delay_isValide:50 });
});
Les options
#txt_generic : id de l'élément 'input'
generic.ashx ou piv3/outilsweb.ashx : url du handler
ou url du proxy
delay : délai (en ms) avant le déclenchement de l'interrogation
minChars : nombre minimum de caractères avant le déclenchement
de l'interrogation
width : largeur de la zone de résultats
extraParams : paramètres supplémentaires passés par
url. searchType -> 0:tout, 1:communes, 2:departements... proxy -> 'l': permet de rediriger
la requete (via proxy) sur le handler correspondant à une recherche de localisation ('g' pour généric, 'r' pour référence d'un bien)
path_imgValide : url de l'image correspondant à une
recherche validée (facultatif)
path_imgNonValide : url de l'image correspondant à
une recherche non validée (facultatif)
id_hiddenfield : id de l'élément input type='hidden'
permettant de stocker le type de l'élément sélectionné (commune:1, codeInsee:2,
codePostal:3, departement:4, vide dans le cadre d'une recherche 'généric') et la valeur de l'élément sélectionné séparé par un | (facultatif)
delay_isValide : délai (en ms) avant déclenchement
de la validation
Format des données
En-tête
Format attendu : 'texte||0\n'
Ex:
Résultat(s)||0\n
Valeurs retournées
Format attendu : 'valeur1|||valeur2\n'
valeur1 est affichée dans la liste de résultats, valeur2 est retournée dans le champs INPUT type='hidden'.
La dernière valeur est facultive, le contrôle peut trés bien se contenter de retourner une seule valeur au format 'valeur|||\n'
Ex:
CC114503|||69T91962/CC114503\n
CC14329|||69T91962/CC14329\n
CC14473|||69T91962/CC14473\n
CC14502|||69T91962/CC14502\n
...
Comment faire...
...déclencher un événement lors d'une sélection
$(document).ready(function() {
$("#txt_localiseur").autocomplete(
'piv3/outilsweb.ashx',
{delay:400, minChars:2, width:300, extraParams:{ proxy:'l' },
path_imgValide:'images/Valide.png', path_imgNonValide:'Images/NonValide.png',
id_hiddenfield:'hid_localiseur', delay_isValide:100 ,onItemSelect:itemSelect
});
});
function itemSelect(li){ alert(li.extra[0]);}
...passer par un proxy
$(document).ready(function() {
$("#txt_localiseur").autocomplete(
'piv3/outilsweb.ashx',
{delay:400, minChars:2, width:300, extraParams:{ proxy:'g' },
path_imgValide:'images/Valide.png', path_imgNonValide:'Images/NonValide.png',
id_hiddenfield:'hid_localiseur', delay_isValide:100
});
});