added auto-complete-list with example values

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, AfterViewInit} from '@angular/core';
+import { Component, AfterViewInit} from '@angular/core';
 
 import { defaults as defaultControls } from 'ol/control';
 import { fromLonLat } from 'ol/proj';
@@ -14,14 +14,10 @@ import ZoomToExtent from 'ol/control/ZoomToExtent';
   styleUrls: ['./app.component.css', '../../node_modules/ol/ol.css']
 })
 
-export class AppComponent implements AfterViewInit, OnInit {
+export class AppComponent implements AfterViewInit {
   title = "Street Map";
   map: Map;
 
-  ngOnInit() {
-    
-  }
-
   ngAfterViewInit() {
     this.map = new Map({
       target: 'map',

src/app/interfaces/nominatim.ts

@@ -1,16 +1,16 @@
 // Nominatim JSON object to TypeScript interface
 export interface Nominatim {
-    boundingbox: Array<string>;
-    category: string;
+    boundingbox?: Array<string>;
+    category?: string;
     display_name: string;
-    icon: string;
-    importance: number;
-    lat: string;
-    licence: string;
-    lon: string;
-    osm_id: number;
-    osm_type: string;
-    place_id: number;
-    place_rank: number;
-    type: string;
+    icon?: string;
+    importance?: number;
+    lat?: string;
+    licence?: string;
+    lon?: string;
+    osm_id?: number;
+    osm_type?: string;
+    place_id?: number;
+    place_rank?: number;
+    type?: string;
 }

src/app/search/search.component.css

@@ -33,6 +33,9 @@
     top: 100%;
     left: 0;
     right: 0;
+    width: 210px;
+    margin-left: 30px;
+    margin-top: 5px;
 }
   
   .autocomplete-items div {

src/app/search/search.component.html

@@ -1,9 +1,20 @@
 <div class="searchField">
 	<div class="autocomplete">
 	  	<input #inputFrom (keyup)="getValue(inputFrom.value, inputTo.value)" type="text" name="inputFrom" id="inputFrom" placeholder="From">
-		 	<div #inputautocompleteList class="autocomplete-items">
-				<div>test<input type="hidden" value="test"></div>
+		  <div #inputautocompleteList class="autocomplete-items">
+			<div *ngFor="let item of itemsFrom" >
+				{{ item.display_name }}
+				<input type="hidden" value="{{ item.display_name }}">
 			</div>
+		</div>
 	</div>
-	<input #inputTo (keyup)="getValue(inputFrom.value, inputTo.value)"type="text" name="inputTo" id="inputTo" placeholder="To">
-  </div>
+	<div class="autocomplete">
+		<input #inputTo (keyup)="getValue(inputFrom.value, inputTo.value)"type="text" name="inputTo" id="inputTo" placeholder="To">
+		<div #inputautocompleteList class="autocomplete-items">
+			<div *ngFor="let item of itemsTo" >
+				{{ item.display_name }}
+				<input type="hidden" value="{{ item.display_name }}">
+			</div>
+		</div>
+	</div>
+</div>

src/app/search/search.component.ts

@@ -11,19 +11,29 @@ import { NominatimService } from '../nominatim.service';
 export class SearchComponent implements OnInit {
   @ViewChild("inputautocompleteList") autocompleteList: ElementRef;
 
+  itemsFrom: Nominatim[] = [];
+  itemsTo: Nominatim[] = [];
 
   constructor(private nominatimService: NominatimService) { }
 
-  updateAutoCompleteList(): void{
-    this.autocompleteList.nativeElement.innerHTML = "Fsd";
+  updateAutoCompleteList(itemsFrom: Nominatim[], itemsTo: Nominatim[]): void{
+
+   this.itemsFrom = itemsFrom;
+   this.itemsTo = itemsTo;
+
+    /*this.autocompleteList.nativeElement.innerHTML = "";
+    items.forEach(item => {
+      this.autocompleteList.nativeElement.innerHTML += '<div>' + item.display_name + '<input type="hidden" value="' + item.display_name + '"></div>' ;
+    });*/
   }
 
   // Gets called in "app.component.html" when an input changes its value
   getValue(valueFrom:string, valueTo:string): void{
     console.log("From " + valueFrom + " to " + valueTo);
+    this.updateAutoCompleteList([{display_name: 'Hallo'}, {display_name: 'Test2'}], [{display_name: 'Halload'}, {display_name: 'Test4'}]);
 
-    this.nominatimService.sendQueryRequest(valueFrom)
-    .subscribe((response: Nominatim[]) => console.log(response));
+    /*this.nominatimService.sendQueryRequest(valueFrom)
+    .subscribe((response: Nominatim[]) => this.updateAutoCompleteList(response));*/
     
   }
   ngOnInit(): void {