Edit in JSFiddle

// resize map
const mapdiv = document.getElementById('mapid');
var margin;
if (document.all) {
  margin = parseInt(document.body.currentStyle.marginTop, 10) + parseInt(document.body.currentStyle.marginBottom, 10);
} else {
  margin = parseInt(document.defaultView.getComputedStyle(document.body, '').getPropertyValue('margin-top')) + parseInt(document.defaultView.getComputedStyle(document.body, '').getPropertyValue('margin-bottom'));
}
mapdiv.style.height = (window.innerHeight - margin) + 'px';

/////
var apikey = '584b2fa686f14ba283874318b3b8d6b0' //api.hkmapservice.gov.hk starter key

var map = L.map('mapid').setView([22.29227, 114.20847], 16);

L.esri.Geocoding.Suggest.prototype.params.key = apikey;
L.esri.Geocoding.Geocode.prototype.params.key = apikey;
L.esri.Service.prototype.metadata = function(callback, context) {
  return this._request('get', '', {
    key: apikey
  }, callback, context);
}

/*
metadata: function (callback, context) {
    return this._request('get', '', {}, callback, context);
  },
*/

L.tileLayer('https://api.hkmapservice.gov.hk/osm/xyz/basemap/WGS84/tile/{z}/{x}/{y}.png?key=' + apikey, {
  attribution: "<a href='https://api.portal.hkmapservice.gov.hk/disclaimer' target='_blank'>&copy; Map from Lands Department <img src='https://api.hkmapservice.gov.hk/mapapi/landsdlogo.jpg' style='width:25px;height:25px'/></a>",
  maxZoom: 19,
}).addTo(map);

L.tileLayer('https://api.hkmapservice.gov.hk/osm/xyz/label-tc/WGS84/tile/{z}/{x}/{y}.png?key=' + apikey, {
  //attribution: "<a href='https://api.portal.hkmapservice.gov.hk/disclaimer' target='_blank'>&copy; Map from Lands Department</a>",
  minZoom: 10,
  maxZoom: 19,
}).addTo(map);

var geocodeAddress = L.esri.Geocoding.geocodeServiceProvider({
  url: 'https://api.hkmapservice.gov.hk/ags/gc/loc/address',
  label: 'Address Point',
  maxResults: 15
});

var geocodeBuilding = L.esri.Geocoding.geocodeServiceProvider({
  url: 'https://api.hkmapservice.gov.hk/ags/gc/ib1000/buildings/building',
  label: 'Building',
  maxResults: 15
});
var geocodeBuildingLic = L.esri.Geocoding.geocodeServiceProvider({
  url: 'https://api.hkmapservice.gov.hk/ags/gc/ic1000/buildinglicence',
  label: 'Building Licence',
  maxResults: 15
});
var geocodeGeocomm = L.esri.Geocoding.geocodeServiceProvider({
  url: 'https://api.hkmapservice.gov.hk/ags/gc/loc/geocomm',
  label: 'Geo Community',
  maxResults: 15
});
var geocodePlacePoint = L.esri.Geocoding.geocodeServiceProvider({
  url: 'https://api.hkmapservice.gov.hk/ags/gc/ib5000/poi/placepoint',
  label: 'Place',
  maxResults: 15
});
var geocodePoiPoint = L.esri.Geocoding.geocodeServiceProvider({
  url: 'https://api.hkmapservice.gov.hk/ags/gc/ib5000/poi/poipoint',
  label: 'POI',
  maxResults: 15
});


var geocodeSite = L.esri.Geocoding.geocodeServiceProvider({
  url: 'https://api.hkmapservice.gov.hk/ags/gc/ib1000/buildings/site',
  label: 'Site',
  maxResults: 15
});

var geocodeSubSite = L.esri.Geocoding.geocodeServiceProvider({
  url: 'https://api.hkmapservice.gov.hk/ags/gc/ib1000/buildings/subsite',
  label: 'SubSite',
  maxResults: 15
});

var geocodeLot = L.esri.Geocoding.geocodeServiceProvider({
  url: 'https://api.hkmapservice.gov.hk/ags/gc/ic1000/lot',
  label: 'LOT',
  maxResults: 15
});

var geocodeTenancyPoly = L.esri.Geocoding.geocodeServiceProvider({
  url: 'https://api.hkmapservice.gov.hk/ags/gc//ic1000/tenancypoly',
  label: 'LOT',
  maxResults: 15
});

var geocodeGLA = L.esri.Geocoding.geocodeServiceProvider({
  url: 'https://api.hkmapservice.gov.hk/ags/gc/ic1000/gla',
  label: 'GLA',
  maxResults: 15
});

var geocodeVGS = L.esri.Geocoding.geocodeServiceProvider({
  url: 'https://api.hkmapservice.gov.hk/ags/gc/ls/vacantgovsite',
  label: 'VGS',
  maxResults: 15
});
 
var geocodeStInt = L.esri.Geocoding.geocodeServiceProvider({
  url: 'https://api.hkmapservice.gov.hk/ags/gc/loc/streetintersection',
  label: 'Streets Intersection',
  maxResults: 15
});

var geocodeStreets = L.esri.Geocoding.geocodeServiceProvider({
  url: 'https://api.hkmapservice.gov.hk/ags/gc/ib1000/transportation/streetcentrelines',
  label: 'Streets',
  maxResults: 15
});

var geocodeLocalControl = L.esri.Geocoding.geocodeServiceProvider({
  url: 'https://api.hkmapservice.gov.hk/ags/gc/sc/localcontrol',
  label: 'Local Control',
  maxResults: 15
});

var geocodeHControl = L.esri.Geocoding.geocodeServiceProvider({
  url: 'https://api.hkmapservice.gov.hk/ags/gc/sc/GeodeticHControl',
  label: 'GeodeticHControl',
  maxResults: 15
});

var geocodeVControl = L.esri.Geocoding.geocodeServiceProvider({
  url: 'https://api.hkmapservice.gov.hk/ags/gc/sc/GeodeticVControl',
  label: 'GeodeticVControl',
  maxResults: 15
});

var geocodeUtility = L.esri.Geocoding.geocodeServiceProvider({
  url: 'https://api.hkmapservice.gov.hk/ags/gc/ib1000/utilities/utilitypoint',
  label: 'Utility Point',
  maxResults: 50
});


var searchControl =
  L.esri.Geocoding.geosearch({
    collapseAfterResult: false,
    allowMultipleResults: true,
    providers: [geocodeAddress, geocodeBuilding, geocodeBuildingLic, geocodeGeocomm, geocodePlacePoint, geocodePoiPoint, geocodeSite, geocodeSubSite, geocodeStInt, geocodeStreets, geocodeLot, geocodeTenancyPoly, geocodeGLA, geocodeVGS, geocodeUtility],
    // providers: [geocodePlacePoint],
    useMapBounds: false,
    zoomToResult: true
  }).addTo(map);
console.log(L.esri.Geocoding);
var results = L.layerGroup().addTo(map);
searchControl.on('results', function(data) {
  results.clearLayers();
  /*
  if (data.results.length > 0) {
    
    results.addLayer(L.marker(data.results[0].latlng).bindPopup(data.results[0].properties.Descr));
     map.setView(data.results[0].latlng, 18)
  }
  */
  console.log(data.results.length);

  //https://github.com/pointhi/leaflet-color-markers
  var redIcon = new L.Icon({
    iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',
    shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
    iconSize: [25, 41],
    iconAnchor: [12, 41],
    popupAnchor: [1, -34],
    shadowSize: [41, 41]
  });

  for (var i = data.results.length - 1; i >= 0; i--) {
    results.addLayer(L.marker(data.results[i].latlng, {
      icon: redIcon
    }).bindPopup(data.results[i].properties.Match_addr + '\n' + data.results[i].properties.Descr));
  }

});
#mapid {
  height: 530px;
}
.leaflet-container .leaflet-control-attribution {
  background: transparent;
}
<script src="https://unpkg.com/esri-leaflet@2.2.3/dist/esri-leaflet.js"></script>
<script src="https://unpkg.com/esri-leaflet-geocoder@2.2.13/dist/esri-leaflet-geocoder.js"></script>

<div id="mapid"></div>

External resources loaded into this fiddle: