Bibliothèque de controles

1) CP, ville ou dép. :

2) CP, ville ou dép. ( + evenement à la sélection):

3) CP ou ville :

4) Dép. :

5) CP, ville ou dép. (avec test serveur) :

6) CP, ville ou dép. (uniq. sur départements 1, 09, 70 et 92) :

Voici un plugin jQuery facilitant l’autocompletion d'une commune, un code postal ou un département.

Les scripts + les images

autocomplete_V1.0.0.zip

Exemple

$(document).ready(function() {
    $("#txt_localiseur").autocomplete(
        'piv3/outilsweb.ashx',
            {delay:400, minChars:2, width:300, extraParams:{ searchType:0, proxy:'l' },
             path_imgValide:'images/Valide.png', path_imgNonValide:'Images/NonValide.png',
             id_hiddenfield:'hid_localiseur', delay_isValide:100
             });
});

Les options

piv3/outilsweb.ashx : url du proxy
extraParams : paramètres supplémentaires passés par url. searchType -> 0:tout, 1:communes, 2:departements. proxy -> 'l': permet de rediriger la requete sur le handler correspondant à une recherche de localisation
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)
pour le reste : se référer à Autocomplete générique

Comment faire...

...déclencher un événement lors d'une sélection

se référer à Autocomplete générique

...préselectionner et valider au chargement de la page

Premiere solution : utiliser l'option initValue et affecter le type de la donnée à valider(nom de la commune, code insee, code postal ou département) suivi du séparateur '|' et de la valeur à rechercher.

Recherche de la commune 'Besancon' (à partir du nom):

$(document).ready(function() {
    $("#txt_localiseur").autocomplete(
        'piv3/outilsweb.ashx',
            {delay:400, minChars:2, width:300, extraParams:{ searchType:0, proxy:'l' },
             path_imgValide:'images/Valide.png', path_imgNonValide:'Images/NonValide.png',
             id_hiddenfield:'hid_localiseur', delay_isValide:100, inputValue:'1|besancon'
             });
});             
   

Deuxième solution : préremplir le champs caché avec le type de la donnée à valider(nom de la commune, code insee, code postal ou département) suivi du séparateur '|' et de la valeur à rechercher.

Recherche de la commune 'Besancon' (à partir du nom):

   <input type="hidden" value="1|besancon" id="hid_localiseur" />
                

Recherche de la commune 'Besancon' (à partir du code insee) :

   <input type="hidden" value="2|25056" id="hid_localiseur" />
                

Recherche du code postal de la commune 'Besancon' soit 25000 (retourne une seule réponse) :

   <input type="hidden" value="3|25000" id="hid_localiseur" />
                

Recherche du code postal soit 25680 (retourne X réponses) :

   <input type="hidden" value="3|25680" id="hid_localiseur" />
                

Recherche du département 'Doubs' :

   <input type="hidden" value="4|25" id="hid_localiseur" />
ou
    <input type="hidden" value="4|doubs" id="hid_localiseur" />
    

...limiter la recherche à une zone géographique

Utiliser l'option deps et séparer les départements avec le séparateur '|'.

Recherche uniquement sur les départements 1, 09, 70 et 92 :

$(document).ready(function() {
    $("#txt_localiseur").autocomplete(
        'piv3/outilsweb.ashx',
            {delay:400, minChars:2, width:300, extraParams:{ searchType:0, proxy:'l' , deps:'1|09|70|92' },
             path_imgValide:'images/Valide.png', path_imgNonValide:'Images/NonValide.png',
             id_hiddenfield:'hid_localiseur', delay_isValide:100
             });
});