kylekatarnls/vicopo

API HTTP et Script pour trouver les villes à partir d'un code postal et code postaux à partir d'une ville

1.3.0 2022-08-03 19:41 UTC

Requires

• php: >=5.3.0

MIT

README

API HTTP et Script pour trouver les villes à partir d'un code postal et code postaux à partir d'une ville

Vicopo est un moyen léger et rapide rechercher une ville française et implémenter des propositions à la volée, l'autocomplétion d'un champ de ville ou de code postal et la conversion de l'un vers l'autre.

https://vicopo.selfbuild.fr/

Utilisation

Afficher les villes possibles dans une liste

<input id="ville" placeholder="Entrez un code postal ou une ville" autocomplete="off" size="50">
<ul>
  <li data-vicopo="#ville">
    <strong data-vicopo-code-postal></strong>
    <span data-vicopo-ville></span>
  </li>
</ul>

Placez le code ci-dessus n'importe où sur votre page, et insérez le script après jQuery (par exemple avant </body>) :

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
<script src="vicopo.min.js"></script>

Voir la démonstration

Ajoutez l'attribut data-vicopo à un élément et passez-lui en paramètre un sélecteur qui pointera vers un champ(<input>, <select> ou <textarea>). Quand la valeur du champs change, l'élément sera duppliqué autant de fois qu'il y a de villes commençant par la valeur tapée ou dont le code postal commence par la valeur tapée (la recherche commence à partir de 2 caractères tapés).

À l'intérieur de ces éléments, les balises portant les attributs data-vicopo-code-postal, data-vicopo-ville seront respectivement pourvus du code postal et de la ville. Si ces balises sont des champs, utilisez data-vicopo-val-code-postal et data-vicopo-val-ville pour que les informations soient assignées en tant que valeur.

Compléter le champ avec le premier nom de ville trouvé

$('#ville').keyup(function (e) {
  if(e.keyCode == 13) {
    var $ville = $(this);
    $.vicopo($ville.val(), function (input, cities) {
      if(input == $ville.val() && cities[0]) {
        $ville.val(cities[0].city).vicopoTargets().vicopoClean();
      }
    });
    e.preventDefault();
    e.stopPropagation();
  }
});

Voir la démonstration

Lors de l'appui sur Entrée, on récupère la première ville et on l'applique comme nouvelle valeur du champ.

L'ajout optionnel de .vicopoTargets().vicopoClean() permet d'effacer la liste de suggestions.

Récupérer les villes au fur et à mesure de la saisie

$('#recherche').vicopo(function (cities) {
  if(cities.length) {
    $('#ville').val(cities[0].city);
    $('#code').val(cities[0].code);
  } else {
    $('#ville').val('');
    $('#code').val('');
  }
  $('#count').val(cities.length + ' villes trouvées');
});

Les méthodes .vicopo(), .codePostal() et .ville() appliquées à un élément jQuery permettent de récupérer dans une variable le résultat de la recherche à chaque lettre saisie dans le champ.

Utilisation sans champs de saisie

$('#cp').click(function () {
  $.ville('strasbourg', function (input, cities) {
    $('#cp-result').text(cities[0].code);
  });
});
$('#villes').click(function () {
  $.ville('des', function (input, cities) {
    $('#villes-result').text(cities.map(function (entry) {
      return entry.city;
    }).join(', '));
  });
});

Voir la démonstration

Les méthodes $.vicopo(), $.codePostal() et $.ville() prennent en premier paramètre le code postal ou la ville (partiel ou entier) recherché et en second paramètre une fonction de callback appelée avec le terme recherché en premier paramètre, les villes trouvées en second et en troisième 'code' pour une recherche de code postal ou 'city' pour une recherche de ville.

API HTTP brute au fomart JSON (par défaut)

{
    "input": "680",
    "cities": [
        {
            "code": 68040,
            "city": "INGERSHEIM"
        },
        {
            "code": 68000,
            "city": "COLMAR"
        }
    ]
}

Plugin node.js

Vicopo est disponible sous node.js directement via require('vicopo') :

var ville = 'Lille';
var vicopo = require('vicopo')('http');
vicopo(ville, function (err, cities) {
    if (err) {
        throw err;
    } else {
        console.log(cities);
    }
});

Plus d'options sur https://vicopo.selfbuild.fr/