From 1a84b9fccfc743303814aa9dc2030b8137a44f18 Mon Sep 17 00:00:00 2001
From: Maxim Uhlemann <maxim.uhlememann@lynq.tech>
Date: Mon, 20 May 2024 15:04:31 +0200
Subject: [PATCH] Use datalist as a native typeahead

---
 .../pruefi-input/pruefi-input.component.html  | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/app/features/ahbs/components/pruefi-input/pruefi-input.component.html b/src/app/features/ahbs/components/pruefi-input/pruefi-input.component.html
index 5e42e2c8b..ca2ca22df 100644
--- a/src/app/features/ahbs/components/pruefi-input/pruefi-input.component.html
+++ b/src/app/features/ahbs/components/pruefi-input/pruefi-input.component.html
@@ -1,11 +1,12 @@
-@if (pruefis$ | async; as pruefis) {
-  <select
-    [formControl]="control"
-    (change)="onChange ? onChange(control.value) : null"
-  >
-    <option value="">Bitte auswählen</option>
-    @for (pruefi of pruefis; track pruefi) {
-      <option [value]="pruefi">{{ pruefi }}</option>
-    }
-  </select>
-}
+<input
+  type="text"
+  list="pruefi-list"
+  [formControl]="control"
+  (change)="onChange ? onChange(control.value) : null"
+  placeholder="Bitte auswählen"
+/>
+<datalist id="pruefi-list">
+  @for (pruefi of pruefis$ | async; track pruefi) {
+    <option [value]="pruefi">{{ pruefi }}</option>
+  }
+</datalist>