Added search box and suggestions based on search term.

src/app/hirebike/hirebike.page.html

@@ -10,16 +10,14 @@
 </ion-header>
 
 <ion-content>
-  <!--div>
-    <ion-item *ngIf="!isBikeHired">
-      <ion-input type="text" [(ngModel)]="Destination" placeholder="Enter Destination"></ion-input>
-    </ion-item>
-    <ion-item *ngIf="isBikeHired">
-      <ion-input type="text" [(ngModel)]="Destination" placeholder="Ongoing Trip" readonly></ion-input>
-    </ion-item>
-  </div-->
-  <!--div #mapElement style="width: 100%; height: 100%" id="mapContainer"></div-->
-  <!--app-here-map [startRideSubject]="startRideSubject" [gotReservedBikeSubject]="gotReservedBikeSubject"></app-here-map-->
+  <ion-searchbar [(ngModel)]="searchValue" (search)="searchValueChanged()"></ion-searchbar>
+  <div *ngIf="true">
+    <ion-list>
+      <ion-item *ngFor="let item of list_to_show; let i = index">
+        <ion-label (click)="click_item(i)">{{ item.label }}</ion-label>
+      </ion-item>
+    </ion-list>
+  </div>
   <div #mapElement style="width: 100%; height: 100%" id="mapContainer" *ngIf="!is3DChecked"></div>
   <ion-fab class="get-position" vertical="bottom" horizontal="end" (click)="getCurrentPosition()" slot="fixed">
     <ion-fab-button>

src/app/hirebike/hirebike.page.ts

@@ -29,7 +29,7 @@ export class HirebikePage implements OnInit {
 
   currentRoute: any;
   routeSummary: any;
-  wayPointsInfo:any;
+  wayPointsInfo: any;
 
   startRideSubject: Subject<any> = new Subject();
   gotReservedBikeSubject: Subject<any> = new Subject();
@@ -61,14 +61,17 @@ export class HirebikePage implements OnInit {
     private mapDataService: MapDataService,
     public locationService: LocationService,
     public loadingService: LoadingService) {
-      
+
     this.platform = new H.service.Platform({
       'apikey': 'tiVTgBnPbgV1spie5U2MSy-obhD9r2sGiOCbBzFY2_k'
     });
+
+    // Get an instance of the geocoding service:
+    this.geocoder = this.platform.getGeocodingService();
   }
 
   ngOnInit() {
-    
+
   }
 
   ngAfterViewInit() {
@@ -438,14 +441,14 @@ export class HirebikePage implements OnInit {
     // listen for map click event
     this.map.addEventListener('tap', this.mapClickedEvent.bind(this));
 
-    if(!this.locationsGroup) {
+    if (!this.locationsGroup) {
       this.locationsGroup = new H.map.Group();
     }
     this.map.addObject(this.locationsGroup);
   }
 
   mapClickedEvent(event) {
-    if(this.rideStarted) {
+    if (this.rideStarted) {
       return;
     }
     //console.log(event.type, event.currentPointer.type);
@@ -462,7 +465,7 @@ export class HirebikePage implements OnInit {
       // Create a marker using the previously instantiated icon:
       this.destinationMarker = new H.map.Marker({ lat: coord.lat, lng: coord.lng }, { icon: icon });
       // Add the marker to the map:
-      if(!this.locationsGroup) {
+      if (!this.locationsGroup) {
         this.locationsGroup = new H.map.Group();
       }
       this.locationsGroup.addObjects([this.destinationMarker]);
@@ -496,7 +499,7 @@ export class HirebikePage implements OnInit {
     // Create a marker using the previously instantiated icon:
     this.currentLocationMarker = new H.map.Marker({ lat: lat, lng: lng }, { icon: icon });
     // Add the marker to the map:
-    if(!this.locationsGroup) {
+    if (!this.locationsGroup) {
       this.locationsGroup = new H.map.Group();
     }
     this.locationsGroup.addObjects([this.currentLocationMarker]);
@@ -512,7 +515,7 @@ export class HirebikePage implements OnInit {
     var marker = new H.map.Marker({ lat: lat, lng: lng }, { icon: icon });
     // Add the marker to the map:
     //this.map.addObject(marker);
-    if(!this.locationsGroup) {
+    if (!this.locationsGroup) {
       this.locationsGroup = new H.map.Group();
     }
     this.locationsGroup.addObjects([marker]);
@@ -542,4 +545,77 @@ export class HirebikePage implements OnInit {
       alert(error);
     });
   }
+
+  AUTOCOMPLETION_URL = 'https://autocomplete.geocoder.api.here.com/6.2/suggest.json';
+  ajaxRequest = new XMLHttpRequest();
+  query = '';
+
+  /**
+   * If the text in the text box  has changed, and is not empty,
+   * send a geocoding auto-completion request to the server.
+   *
+   * @param {Object} textBox the textBox DOM object linked to this event
+   * @param {Object} event the DOM event which fired this listener
+   */
+  autoCompleteListener(searchValue) {
+
+    if (this.query != searchValue) {
+      if (searchValue.length >= 1) {
+
+        /**
+        * A full list of available request parameters can be found in the Geocoder Autocompletion
+        * API documentation.
+        *
+        */
+        var params = '?' +
+          'query=' + encodeURIComponent(searchValue) +   // The search text which is the basis of the query
+          '&beginHighlight=' + encodeURIComponent('<mark>') + //  Mark the beginning of the match in a token. 
+          '&endHighlight=' + encodeURIComponent('</mark>') + //  Mark the end of the match in a token. 
+          '&maxresults=5' +  // The upper limit the for number of suggestions to be included 
+          '&prox=' + this.currentUserPosition.lat +','+this.currentUserPosition.lng +',1000' +
+          // in the response.  Default is set to 5.
+          '&app_id=' + 'YSAnHxghC6xWxaZ7Wehn' +
+          '&app_code=' + 'mQFi1FqoEypbfQDJjMENPg';
+        let bikeReservationStatusApi = this.httpClient.get(this.AUTOCOMPLETION_URL + params);
+        bikeReservationStatusApi.subscribe((resp: any) => {
+          console.log('Search Results', resp);
+          this.list_to_show = resp.suggestions;
+        }, (bikeDetailsError) => {
+          console.log(bikeDetailsError);
+        });
+      }
+    }
+  }
+  list_to_show = [];
+  searchValue = '';
+  searchValueChanged() {
+    console.log(this.searchValue);
+    // var geocodingParams = {
+    //   searchText: this.searchValue
+    // };
+    this.autoCompleteListener(this.searchValue);
+    // this.geocoder.geocode(geocodingParams, this.onSearchResult, function(e) {
+    //   console.log(e);
+    // });
+  }
+
+  // Get an instance of the geocoding service:
+ geocoder: any;
+
+ onSearchResult(result) {
+    var locations = result.Response.View[0].Result,
+        position,
+        marker;
+    
+    console.log(result);
+    // Add a marker for each location found
+    // for (let i = 0;  i < locations.length; i++) {
+    //   position = {
+    //     lat: locations[i].Location.DisplayPosition.Latitude,
+    //     lng: locations[i].Location.DisplayPosition.Longitude
+    //   };
+    //   marker = new H.map.Marker(position);
+    //   this.map.addObject(marker);
+    // }
+ }
 }