diff --git a/src/app/app.component.css b/src/app/app.component.css
index 5378f67..d28069b 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -14,62 +14,6 @@ header p{
     float:right;
 }
 
-.searchField{
-    display:block;
-    float:left;
-    margin-top: 10px;
-}
-
-.searchField input{
-    margin-left: 25px;
-    border: 1px solid white;
-    border-radius: 3px;
-    background-color: rgb(253, 253, 253);
-    height: 20px;
-    font-size: 13pt;
-    font-weight: bold;
-    font-family: 'Roboto';
-    padding: 5px;
-}
-
-.autocomplete {
-    position: relative;
-    display: inline-block;
-    color: black;
-  }
-  
-.autocomplete-items {
-    position: absolute;
-    border: 1px solid #d4d4d4;
-    border-bottom: none;
-    border-top: none;
-    z-index: 99;
-    /*position the autocomplete items to be the same width as the container:*/
-    top: 100%;
-    left: 0;
-    right: 0;
-}
-  
-  .autocomplete-items div {
-    padding: 10px;
-    cursor: pointer;
-    background-color: #fff; 
-    border-bottom: 1px solid #d4d4d4; 
-}
-  
-  /*when hovering an item:*/
-  .autocomplete-items div:hover {
-    background-color: #e9e9e9; 
-}
-  
-  /*when navigating through the items using the arrow keys:*/
-  .autocomplete-active {
-    background-color: DodgerBlue !important; 
-    color: #ffffff; 
-}
-
-
-
 #map{
     width: 100%;
     height: 100%;
diff --git a/src/app/app.component.html b/src/app/app.component.html
index e4963ba..b78cf35 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,13 +1,5 @@
 <header>
-  <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>
-	</div>
-	<input #inputTo (keyup)="getValue(inputFrom.value, inputTo.value)"type="text" name="inputTo" id="inputTo" placeholder="To">
-  </div>
+  <app-search></app-search>
   <p>{{title}}</p>
 </header>
 
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 28fbfd5..1b07991 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -18,7 +18,7 @@ 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;
 
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 1be550e..6ce9c83 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -2,10 +2,12 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import {HttpClientModule} from '@angular/common/http';
 import { AppComponent } from './app.component';
+import { SearchComponent } from './search/search.component';
 
 @NgModule({
   declarations: [
     AppComponent,
+    SearchComponent,
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/interfaces/nominatim.ts b/src/app/interfaces/nominatim.ts
index a4661d1..1f59ce9 100644
--- a/src/app/interfaces/nominatim.ts
+++ b/src/app/interfaces/nominatim.ts
@@ -1,16 +1,16 @@
 // Nominatim JSON object to TypeScript interface
 export interface Nominatim {
-    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;
+    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;
 }
diff --git a/src/app/search/search.component.css b/src/app/search/search.component.css
new file mode 100644
index 0000000..c2093e1
--- /dev/null
+++ b/src/app/search/search.component.css
@@ -0,0 +1,67 @@
+#inputFrom:focus + .autocomplete-items-from{
+  display:block;
+}
+
+#inputTo:focus + .autocomplete-items-to{
+  display:block;
+}
+
+.searchField{
+    display:block;
+    float:left;
+    margin-top: 10px;
+}
+
+.searchField input{
+    margin-left: 25px;
+    border: 1px solid white;
+    border-radius: 3px;
+    background-color: rgb(253, 253, 253);
+    height: 20px;
+    font-size: 13pt;
+    font-weight: bold;
+    font-family: 'Roboto';
+    padding: 5px;
+}
+
+.autocomplete {
+    position: relative;
+    display: inline-block;
+    color: black;
+  }
+  
+.autocomplete-items {
+    display:none;
+    position: absolute;
+    border: 1px solid #d4d4d4;
+    border-bottom: none;
+    border-top: none;
+    z-index: 99;
+    /*position the autocomplete items to be the same width as the container:*/
+    top: 100%;
+    left: 0;
+    right: 0;
+    width: 210px;
+    margin-left: 30px;
+    margin-top: 5px;
+}
+  
+  .autocomplete-items div {
+    padding: 10px;
+    font-weight: normal;
+    font-size: 11pt;
+    cursor: pointer;
+    background-color: #fff; 
+    border-bottom: 1px solid #d4d4d4; 
+}
+  
+  /*when hovering an item:*/
+  .autocomplete-items div:hover {
+    background-color: #e9e9e9; 
+}
+  
+  /*when navigating through the items using the arrow keys:*/
+  .autocomplete-active {
+    background-color: DodgerBlue !important; 
+    color: #ffffff; 
+}
\ No newline at end of file
diff --git a/src/app/search/search.component.html b/src/app/search/search.component.html
new file mode 100644
index 0000000..8a3264a
--- /dev/null
+++ b/src/app/search/search.component.html
@@ -0,0 +1,20 @@
+<div class="searchField">
+	<div class="autocomplete">
+	  	<input #inputFrom (change)="getValue(inputFrom.value, inputTo.value)" type="text" name="inputFrom" id="inputFrom" placeholder="From">
+		  <div #inputautocompleteList class="autocomplete-items autocomplete-items-from">
+			<div *ngFor="let item of itemsFrom" >
+				{{ item.display_name }}
+				<input type="hidden" value="{{ item.display_name }}">
+			</div>
+		</div>
+	</div>
+	<div class="autocomplete">
+		<input #inputTo (change)="getValue(inputFrom.value, inputTo.value)" type="text" name="inputTo" id="inputTo" placeholder="To">
+		<div #inputautocompleteList class="autocomplete-items autocomplete-items-to">
+			<div *ngFor="let item of itemsTo" >
+				{{ item.display_name }}
+				<input type="hidden" value="{{ item.display_name }}">
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/src/app/search/search.component.spec.ts b/src/app/search/search.component.spec.ts
new file mode 100644
index 0000000..918ce70
--- /dev/null
+++ b/src/app/search/search.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SearchComponent } from './search.component';
+
+describe('SearchComponent', () => {
+  let component: SearchComponent;
+  let fixture: ComponentFixture<SearchComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SearchComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SearchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/search/search.component.ts b/src/app/search/search.component.ts
new file mode 100644
index 0000000..f949500
--- /dev/null
+++ b/src/app/search/search.component.ts
@@ -0,0 +1,36 @@
+import { Component, OnInit, ElementRef, ViewChild} from '@angular/core';
+import { Nominatim } from '../interfaces/nominatim';
+import { NominatimService } from '../nominatim.service';
+
+@Component({
+  selector: 'app-search',
+  templateUrl: './search.component.html',
+  styleUrls: ['./search.component.css']
+})
+
+export class SearchComponent implements OnInit {
+  @ViewChild("inputautocompleteList") autocompleteList: ElementRef;
+
+  itemsFrom: Nominatim[] = [];
+  itemsTo: Nominatim[] = [];
+
+  constructor(private nominatimService: NominatimService) { }
+
+
+  // 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[]) => this.itemsFrom = response);
+
+    this.nominatimService.sendQueryRequest(valueTo)
+    .subscribe((response: Nominatim[]) => this.itemsTo = response);
+    
+  }
+  ngOnInit(): void {
+  }
+
+}