Le plugin JavaScript Silverpeas adresssearch permet d'aider l'utilisateur a renseigner plus facilement une adresse.
Il s'agit ici d'une aide à la saisie, et non pas d'une fonctionnalité de validation d'une adresse.
Ci-après un exemple de sa mise en oeuvre.
Partons d'un formulaire de saisie dans lequel une adresse doit être renseignée :
Dans le DOM, les identifiants techniques sont les suivants :
- Adresse :
#street
- Code postal :
#postalCode
- Ville :
#city
Dans un premier temps, il faut importer le plugin dans la page Silverpeas.
Si le formulaire de saisie est présenté depuis une page JSP dédiée, il suffit d'indiquer dans la balise head :
<view:includePlugin name="addresssearch" />
Mais dans notre exemple, le formulaire est affiché dynamiquement dans la page, et cette page n'inclue pas encore le plugin.
Le plugin est alors chargé dynamiquement en JavaScript :
sp.dom.includePlugin('addresssearch').then(function() {
// fonction exécutée quand le plugin est chargé
});
Quelle que soit la méthode de chargement, il faut ensuite décorer le champ de saisie
Adresse avec les comportements apportés par le plugin :
AddressSearchInput.decorate("#street");
Le champ de saisie se présente alors comme suit :
Lorsque l'utilisateur commence à saisir une adresse (plus de 5 caractères) et que des adresses correspondent en partie, elles sont présentées (20 maximum) à l'utilisateur.
Il peut alors en sélectionner une (flèches haut/bas du clavier puis entrée, ou avec la souris) :
Dans le cas de notre exemple, sur la sélection d'une adresse, les champs Adresse, Code postal et Ville doivent être renseignés automatiquement.
Pour ce faire, il faut compléter le code ci-dessus :
// chargement dynamique du plugin
sp.dom.includePlugin('addresssearch').then(function() {
// décoration du champ de saisie
const asi = AddressSearchInput.decorate("#street");
// écoute de l'événement 'select' pour obtenir l'adresse sélectionnée (custom event)
asi.addEventListener('select', function(e) {
const address = e.detail.data;
// les valeurs sont renseignées automatiquement
asi.target.value = address.getStreet()[0];
document.querySelector('#postalCode').value = address.getPostalCode();
document.querySelector('#city').value = address.getCity();
// le focus est donné sur le champ de saisie qui suit
document.querySelector('#contact').focus();
})
});
Et voilà le résultat :
Rien n'empêche l'utilisateur ensuite de modifier les données qui ont été renseignées automatiquement.
PR : https://github.com/Silverpeas/Silverpeas-Core/pull/1283
Mis à jour par 
Mis à jour par