Jquery Autocomplete Demo

Autocomplete Demo with remote Data-source

by LandsD Map API

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.1/proj4.js"></script>
<link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css">
<script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
<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>

CSS

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 a {
  color: black;
}

.ol-attribution ul {
  font-size: 12px;
  font-family: sans-serif;
}

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

JavaScript

var apikey = "c84e886891014383bcf608423555b0ba";
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 vectorSource = new ol.source.Vector({});
var attributions = new ol.Attribution({
  html: "<a href='https://api.portal.hkmapservice.gov.hk/disclaimer' target='_blank'>&copy; Map information 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',
           ...