Vicopo

by Kyle Katarn

HTML

<script src="https://vicopo.selfbuild.fr/api.js"></script>
<p>
  <label>
    Tapez le début d'un nom de ville ou d'un code postal puis appuyez sur <b>Entrée</b>.<br>
    <input id="ville" placeholder="Entrez un code postal ou une ville" autocomplete="off" size="50">
  </label>
</p>
<ul>
  <li data-vicopo="#ville">
    <strong data-vicopo-code-postal></strong>
    <span data-vicopo-ville></span>
  </li>
</ul>

CSS

body {
  font-family: sans-serif;
  min-height: 160px;
  box-sizing: border-box;
  padding: 10px;
  margin: 0;
}
input {
  padding: 4px 8px;
}
label {
  line-height: 2em;
}

JavaScript

$('#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();
  }
});