CitySearch-API : webservice et son API géographique Rss du webservice CitySearch-API

Webservices JSON | Webservices XML | Villes proches |

Identification | Contact

API du webservice géographique français

Widget Javascript pour des champs TEXT

home > Widget Javascript > Tutorial sur champ TEXT

Fonctionnement haut de page

Ce widget permet d'afficher l'auto-suggestion sur les champs select des villes de votre page.

En renseignant les premières lettres de la ville, l'auto-suggestion propose à l'internaute toutes les villes commençant par les lettres proposées.

En renseignant la ville via la suggestion, le champ code postal est automatiquement renseigné par le widget.

Via le champ code postal, en renseignant les premiers chiffres du code postal, l'auto-suggestion propose tous les codes postaux débutant par ces chiffres.

: Ajouter l'attribut autocomplete avec comme valeur off sur les champs input concernés pour ne pas avoir les auto-suggestions du navigateur.

Arguments requishaut de page

Les paramètres requis, sont le login (APP_LOGIN) et la clé (APP_KEY) que vous avez créés pour le site concerné, tel que :

: String (nom que vous avez donné à votre application)

: String (la clé que vous avez reçu lors de la création de votre application)

Arguments optionnelshaut de page

Liste des arguments optionnels :

: Boolean (permet de spécifier si on veut récupérer la liste de tous les pays, régions et départements chez CitySearch-API au chargement de la page concernée)

: Boolean (pour associer un style par défault au widget)

: Boolean (pour activer les logs firebugs)

Construction du widgethaut de page

Intégrer le script suivant dans le code de votre page juste avant la balise de fin head par exemple, en modifiant les paramètres obligatoires APP_NAME et APP_KEY et les paramètres optionnels.

		
	

Construction du HTMLhaut de page

La construction du formulaire HTML est classique et ne nécéssite que l'ajout d'un attribut de type search sur les champs concernés par le widget ainsi que d'une classe ui-autocomplete-select.

Pour ne pas interférer avec le HTML déjà existant de vos formulaires, CitySearch-API a pris le parti de ne pas prendre en compte l'attribut name dans son fonctionnement.

Exemple d'ajout d'un attribut search sur un champ pays :

		
	

Attributs possibleshaut de page

L'attribut search permet de spécifier le type de recherche à effectuer sur le champ concerné.

Il peut prendre différent type de valeurs :

: string

Permet de spécifier un champ de type département.

Dans le cas où le paramètre default du widget est activé, au chargement de la page, la liste des départements sera automatiquement loadée dans ce SELECT si aucun champ région n'est trouvé.

Lorsque l'utilisateur commencera à renseigner son département, des départements commençant par les premières lettres renseignées lui seront automatiquement proposés.

Exemple :

			
		

: string

Permet de spécifier un champ de type ville.

Lorsque l'utilisateur commencera à renseigner sa ville, des villes commençant par les premières lettres renseignées lui seront automatiquement proposées.

Lorsque l'utilisateur selectionnera l'une des villes proposées, les champs input, déjà présents dans la page, de type "cp" seront automatiquement renseignés.

Exemple :

			
		

: string

Permet de spécifier un champ de type "code postal".

Lorsque l'utilisateur commencera à renseigner sa ville, des codes postaux commençant par les premières lettres renseignées lui seront automatiquement proposés.

Exemple avec un champ TEXT:

				
		

Astucehaut de page

Sur les champs TEXT, ajoutez l'attribut autocomplete à off pour ne pas avoir des anciennes valeurs proposées automatiquement par le navigateur.

Exemple :

		
		

Exemples haut de page

Retrouvez ci-dessous quelques exemples d'utilisation du widget:


Afficher les commentaires | Signaler une erreur


Webservices JSON | Webservices XML | Villes proches |

Identification | Contact

API du webservice géographique français

Menu

Recherche sur des champs select