D3 Examples - Leaflet demo to use autocompletion with French GeoAPI and Leaflet.js library http://bl.ocks.org/ThomasG77/0b99013795f76699c5c9a0d7daf4411e

xxxxxxxxxx
 
<!DOCTYPE html><html lang="en">
<head>
    <meta charset="utf-8">
    <title>Vanilla JavaScript autoComplete with French GeoAPI endpoint with Leaflet (adapted from my own OpenLayers sample)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="auto-complete.css">
    <script src=""></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
    <style>
      html, body {
        height: 100%;
        padding: 0;
        margin: 0;
      }
      #map {
        /* configure the size of the map */
        width: 100%;
        height: 100%;
      }
    </style>
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
</head>
<body>
    <form onsubmit="return false;" style="border-top: 1px solid #eee;border-bottom:1px solid #eee;background:#fafafa;margin:30px 0;padding:20px 10px;text-align:center">
        <input id="places-search" autofocus type="text" name="q" placeholder="Communes ..." style="width:100%;max-width:600px;outline:0">
    </form>
​
    <div id="map" class="map"></div>
    <script src="auto-complete.js"></script>
    <script>
​
      var OpenStreetMap_France = L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
        maxZoom: 20,
        attribution: '&copy; Openstreetmap France | &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
      });
​
      var map = L.map('map').setView({lon: 1.87528, lat: 46.60611}, 5);
​
      map.addLayer(OpenStreetMap_France);
​
      var demo_with_map = new autoComplete({
        selector: '#places-search',
        minChars: 2,
        source: function(term, response) {
          fetch('https://geo.api.gouv.fr/communes?boost=population&fields=centre&nom=' + term)
            .then(function(response) {
              return response.text();
            }).then(function(body) {
              var json = JSON.parse(body);
              var new_json = json.map(function(el) {
                return {
                  label: el.nom + ' (' + el.code + ')',
                  value: el.code,
                  lat: el.centre.coordinates[1],
                  lon: el.centre.coordinates[0],
                  boundingbox: null
                }
              })
              response(new_json);
            });
        },
        renderItem: function(item, search) {
          search = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
          var re = new RegExp("(" + search.split(' ').join('|') + ")", "gi");
          var optional_bbox_attribute = '';
          if (item.boundingbox) {
            var bbox = [item.boundingbox[2], item.boundingbox[0], item.boundingbox[3], item.boundingbox[1]];
            var optional_bbox_attribute = 'data-bbox="' + bbox.join(',') + '" ';
          }
          return '<div class="autocomplete-suggestion" ' + optional_bbox_attribute +
            'data-lon="' + item.lon + '" data-lat="' + item.lat +
            '" data-val="' + item.label + '">' +
            item.label.replace(re, "<b>$1</b>") +
            '</div>';
        },
        onSelect: function(e, term, item) {
          if (item.getAttribute('data-bbox') && (item.getAttribute('data-bbox').split(',')).length > 0) {
            var extent = item.getAttribute('data-bbox').split(',');
            if (extent.length > 0) {
              extent = extent.map(function(el) {
                return Number(el);
              });
            }
            var bounds = [[extent[1], extent[0]], [extent[3], extent[2]]];
​
            // zoom the map to the bounds
            map.fitBounds(bounds);
          } else {
            var lat = Number(item.getAttribute('data-lat'));
            var lon = Number(item.getAttribute('data-lon'));
            map.setView(L.latLng(lat, lon), 12);
          }
        }
      });
​
    </script>
</body>
</html>
​
    