From b0215df6c58f0ec87fc04799270baed70a86fa67 Mon Sep 17 00:00:00 2001
From: Janis Meister <meister.nets@gmail.com>
Date: Thu, 13 Jan 2022 12:09:38 +0100
Subject: [PATCH] added html autocompletelist

---
 src/app/app.component.css  | 38 ++++++++++++++++++++++++++++++++++++++
 src/app/app.component.html |  9 +++++++--
 src/app/app.component.ts   | 10 +++++++++-
 3 files changed, 54 insertions(+), 3 deletions(-)

diff --git a/src/app/app.component.css b/src/app/app.component.css
index 749b76b..5378f67 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -32,6 +32,44 @@ header p{
     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 cc47a56..e4963ba 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,7 +1,12 @@
 <header>
   <div class="searchField">
-    <input #inputFrom (change)="getValue(inputFrom.value, inputTo.value)" type="text" name="inputFrom" id="inputFrom" placeholder="From">
-    <input #inputTo (change)="getValue(inputFrom.value, inputTo.value)"type="text" name="inputTo" id="inputTo" placeholder="To">
+	<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>
   <p>{{title}}</p>
 </header>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index d602db1..a779e2b 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, AfterViewInit } from '@angular/core';
+import { Component, OnInit, AfterViewInit, ElementRef, ViewChild} from '@angular/core';
 import { Nominatim } from './interfaces/nominatim';
 import { NominatimService } from './nominatim.service';
 
@@ -20,14 +20,22 @@ export class AppComponent implements AfterViewInit, OnInit {
   title = "Street Map";
   map: Map;
 
+  @ViewChild("inputautocompleteList") autocompleteList: ElementRef;
+
+
   constructor(private nominatimService: NominatimService) { }
   
+  updateAutoCompleteList(): void{
+    this.autocompleteList.nativeElement.innerHTML = "Fsd";
+  }
+
   // 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.nominatimService.sendQueryRequest(valueFrom)
     .subscribe((response: Nominatim[]) => console.log(response));
+    
   }
 
   ngOnInit() {