Wie erstelle ich eine Datalist mit CSS, die so funktioniert wie <datalist>?

[Tabula_Rasa]

Hallo,

ich habe folgenden Code (paar Abschnitte, die nur für Verwirrung sorgen würden, habe ich herausgenommen)

<div class="input-wrapper" >
   <input type="text" list="diagnose-list" placeholder="Suchen...">
   <datalist id="diagnose-list">
      <option></option>
   </datalist>
   <div class="btn searchBtn">
      <i class="fas fa-search"></i>
   </div>
</div>

Es funktioniert alles, wie es soll. Das Problem ist, dass ich Angular verwende und irgendwie funktioniert der ClickListener auf den Optionen in der datalist nicht ganz. Deshalb würde ich gerne eine eigene datalist mithilfe von CSS programmieren, jedoch schaffe ich es nicht ganz, die datalist so zu gestalten wie die eigentliche <datalist> (positionierung kriege ich nicht hin). Wie würde ich solch eine Datalist unter einem Input selber implementieren ohne <datalist> zu verwenden?

 

[basti1012]

Es funktioniert alles, wie es soll. Das Problem ist, dass ich Angular verwende und irgendwie funktioniert der ClickListener auf den Optionen in der datalist nicht ganz

Vielleicht hilft dir das ja

How to trigger click event for datalist in angular - Pretag

The <datalist> HTML element contains a set of <option> elements that represent the permissible or recommended options available to choose from within other c...

pretagteam.com

Datalist selber bauen würde ich so machen


Link zur Lösung

 

[Tabula_Rasa]

Danke für eure Hilfe. Ich habe für mich eine ziemlich gute und leicht zu implementierende Lösung gefunden. Ich benutze <mat-autocomplete> (Angular material)