Jquery Autocomplete Demo

var apikey = "584b2fa686f14ba283874318b3b8d6b0";
var url = "https://api.hkmapservice.gov.hk/ags/gc/composite";
var hk80 = "+proj=tmerc +lat_0=22.31213333333334 +lon_0=114.1785555555556 +k=1 +x_0=836694.05 +y_0=819069.8 +ellps=intl +towgs84=-162.619,-276.959,-161.764,0.06774,-2.243665,-1.158834,-1.09425 +units=m +no_defs";
proj4.defs("EPSG:2326", hk80);

//var projection = ol.proj.get('EPSG:3857');
var vectorSource = new ol.source.Vector({});
var attributions = new ol.Attribution({
  html: "<a href='https://api.portal.hkmapservice.gov.hk/disclaimer' target='_blank'>&copy; Map from Lands Department</a><div style='width:25px;height:25px;display:inline-flex;background:url(https://api.hkmapservice.gov.hk/mapapi/landsdlogo.jpg);background-size:25px;margin-left:4px'></div>"
});


var selectGeocode = document.getElementById("SelectGeocode")
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
var curpos = undefined;
var overlay = new ol.Overlay(({
  element: container,
  autoPan: true,
  autoPanAnimation: {
    duration: 250
  }
}));
closer.onclick = function() {
  overlay.setPosition(undefined);

  closer.blur();
  return false;
};
$(document).ready(function() {

  var map = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.XYZ({
          attributions: attributions,
          projection: "EPSG:3857",
          url: "https://api.hkmapservice.gov.hk/osm/xyz/basemap/WGS84/tile/{z}/{x}/{y}.png?key=" + apikey
        })
      }),
      new ol.layer.Tile({
        source: new ol.source.XYZ({
          projection: "EPSG:3857",
          url: "https://api.hkmapservice.gov.hk/osm/xyz/label-tc/WGS84/tile/{z}/{x}/{y}.png?key=" + apikey
        })
      }),
      new ol.layer.Vector({
        source: vectorSource,
        style: new ol.style.Style({
          image: new ol.style.Icon({
            anchor: [0.5, 1],
            anchorXUnits: 'fraction',
            anchorYUnits: 'fraction',
            opacity: 1,
            src: 'https://mapapis01.blob.core.windows.net/images/location.png'
              //'https://openlayers.org/en/v3.19.1/examples/data/icon.png'
          })
        })
      }),


    ],
    overlays: [overlay],
    target: 'map',
    controls: ol.control.defaults({
      attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
        collapsible: false
      })
    }),
    interactions: ol.interaction.defaults().extend([
      new ol.interaction.DragRotateAndZoom()
    ]),
    view: new ol.View({
      center: ol.proj.fromLonLat([114.20847, 22.29227]),
      //projection: 'EPSG:3857',
      //extent: projection.getExtent(),
      zoom: 17,
      minZoom: 10,
      maxZoom: 19
    })
  });

  map.on('singleclick', function(evt) {
    overlay.setPosition(curpos);
  });

  SelectGeocode.addEventListener("change", function(evt) {
    if (SelectGeocode.selectedIndex != undefined) {
      url = SelectGeocode[SelectGeocode.selectedIndex].value;
    } else {
      url = SelectGeocode.selectedOptions[0].value;
    }
  });

  $("#suggest").autocomplete({
    delay: 100,
    source: function(request, response) {
      // Suggest URL
      var suggestURL = url + "/suggest?f=json"
      suggestURL += "&maxSuggestions=10"
      suggestURL += "&text=" + encodeURI(request.term.trim())
      suggestURL += "&key=" + apikey;

      // JSONP Request
      $.ajax({
          method: 'GET',
          dataType: 'jsonp',
          jsonpCallback: 'jsonCallback',
          url: suggestURL
        })
        .success(function(data) {
          //response(data[1]);
          var conent = [];

          //console.log(data.suggestions);
          for (var i = 0; i < data.suggestions.length; i++) {
            var obj = {
              label: data.suggestions[i].text,
              value: data.suggestions[i].text,
              magicKey: data.suggestions[i].magicKey
            };
            conent[i] = obj
          }
          response(conent);

        });
    },

    select: function(event, suggestion) {
      var magicKey = suggestion.item.magicKey;
      var FindAddressURL = "";
      if (magicKey != "") {
        //console.log(magicKey);
        var FindAddressURL = url + '/findAddressCandidates?f=json&outFields=*';
        FindAddressURL += '&maxLocations=20';
        FindAddressURL += '&outFields=*';
        FindAddressURL += '&outSR=4326';
        FindAddressURL += '&magicKey=';
        FindAddressURL += magicKey + '&key=' + apikey;
        //console.log(FindAddressURL);
        $.ajax({
            method: 'GET',
            dataType: 'jsonp',
            jsonpCallback: 'jsonCallback',
            url: FindAddressURL
          })
          .success(function(data) {
            //console.log(data)
            var extent;
            var location = [];
            vectorSource.clear();

            for (var intI = 0; intI < data.candidates.length; intI++) {
              var lat = data.candidates[intI].location.y;
              var lon = data.candidates[intI].location.x;
              var iconFeature = new ol.Feature({
                geometry: new ol.geom.Point(ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857'))
              })

              location.push(iconFeature);

              vectorSource.addFeature(iconFeature);
              extent = iconFeature.getGeometry();


              content.innerHTML = "Location:<br><hr>";
              content.innerHTML += data.candidates[intI].attributes.Match_addr;
              content.innerHTML += '<br><hr>' + data.candidates[intI].attributes.Descr
              content.innerHTML += '<br><hr>' + ol.coordinate.toStringXY([lon, lat], 4);
              var hk80pos = ol.proj.transform(extent.getCoordinates(), 'EPSG:3857', 'EPSG:2326');
              content.innerHTML += '<br>' + ol.coordinate.toStringXY(hk80pos, 4);

            }
            curpos = extent.getCoordinates()
            overlay.setPosition(extent.getCoordinates());

            map.getView().fit(extent, map.getSize());
            map.getView().setZoom(18);
          });
      }

    }
  });
});

body {
  padding: 30px;
}

#suggest {
  position: absolute;
  top: 0px;
  left: 20px;
  padding: 2px;
  width: 220px;
  font-size: 14px;
}

.ui-menu {
  font-size: 10px
}

#map {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  position: absolute;
  padding: 0px;
}

#searchPanel {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 500px;
  max-width: 600px;
  z-index: 99999;
}

#SelectGeocode {
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 2px;
  width: 20px;
  font-size: 14px;
}

#places-search {
  position: absolute;
  top: 0px;
  left: 20px;
  padding: 2px;
  font-size: 14px;
}

.ol-popup {
  position: absolute;
  background-color: white;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  padding: 5px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 12px;
  left: -50px;
  min-width: 250px;
}

.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}

.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}

.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}

.ol-popup-closer:after {
  content: "✖";
}

#popup-content {
  font-size: 12px
}

.ol-attribution.ol-uncollapsible {
  bottom: 13px;
}
.ol-attribution:not(.ol-collapsed) {
  background: transparent;
}

<div id="map" class="map">
  <div id="searchPanel">
    <select id="SelectGeocode">
      <option value="https://api.hkmapservice.gov.hk/ags/gc/composite">All</option>
      <option value="https://api.hkmapservice.gov.hk/ags/gc/loc/address">Address</option>
      <option value="https://api.hkmapservice.gov.hk/ags/gc/ib1000/buildings/building">Building</option>
      <option value="https://api.hkmapservice.gov.hk/ags/gc/loc/geocomm">Geo Community</option>
      <option value="https://api.hkmapservice.gov.hk/ags/gc/ib5000/poi/placepoint">Place Point</option>
      <option value="https://api.hkmapservice.gov.hk/ags/gc/ib5000/poi/poipoint">POI</option>
      <option value="https://api.hkmapservice.gov.hk/ags/gc/ib1000/buildings/site">Site</option>
      <option value="https://api.hkmapservice.gov.hk/ags/gc/ib1000/buildings/subsite">SubSite</option>
      <option value="https://api.hkmapservice.gov.hk/ags/gc/loc/streetintersection">Streets</option>
      <option value="https://api.hkmapservice.gov.hk/ags/gc/ib1000/utilities/utilitypoint">Utility Point</option>
    </select>
    <input id="suggest" autofocus type="search" name="q" placeholder="  Places ..." style="width:100%;max-width:300px;outline:1">
  </div>
  <div id="popup" class="ol-popup">
    <a href="#" id="popup-closer" class="ol-popup-closer"></a>
    <div id="popup-content"></div>
  </div>
</div>

Edit in JSFiddle

External resources loaded into this fiddle: