Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including vicopo with all npm packages installed. Try it out:

var vicopo = require("vicopo")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vicopo v1.1.8

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

VICOPO

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>

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)

ProtocoleURL
HTTPhttp://vicopo.selfbuild.fr/cherche/680
HTTPShttps://vicopo.selfbuild.fr/cherche/680
{
    "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/

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free