Archiv-Modus von Basti1012 Lösungspage

Hallo, ich habe folgenden Code (paar Abschnitte, die nur für Verwirrung sorgen würden, habe ich herausgenommen) Code: <div class="prehelp"><pre class="html_code"><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></pre></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?

Code

                                    
                                <html>
  <head>
    <style>
      *{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
h1{
  font-size:29px;
}
body {
  background: dodgerblue linear-gradient(45deg, aqua, dodgerblue, deeppink) fixed;
	color: white;
  font: normal 32px/1.6 system-ui, sans-serif;
	text-shadow: 0 1px 1px hsl(0 0% 0% / 20%);
  margin: 3rem;
}

#datalist_helper{
  width:300px;
  overflow:hidden;
}


#datalist_helper > input { cursor:pointer;
}
#datalist_helper > .options {
  list-style-type:none;
  opacity:0;
  margin: -1px 0 0 0;
}
#datalist_helper > .options > li, #datalist_helper input{
  width:100%;
  padding:5px 0 0 10px;
  color:black;
  background:white;
  font-size:24px;
  height:45px;
  cursor:pointer;
  border:1px solid #ccc;
}
#datalist_helper > .options > li:hover { 
  background:lightgreen;
}
.fader { 
  animation:fadeInOptions 0.2s forwards; 
}
@keyframes fadeInOptions {
  from { opacity:0; }
  to { opacity:1.0; }
}

    </style>
  </head>
  <body>
<h1>Data List eigenbau</h1>
<div id="datalist_helper">
  <input type="text" autocomplete="off">
  <ul class="options">
    <li>Apfel</li>
    <li>Banane</li>
    <li>Birne</li>
  </ul>
 
 
</div>
 <script>
    var ul_list = document.querySelector('#datalist_helper > .options'); 
var inp = document.querySelector('#datalist_helper > input');


inp.addEventListener('click',function(e){
  ul_list.classList.add('fader'); 
});



var lis=document.querySelectorAll('#datalist_helper > .options > li');
lis.forEach(function(e){
      e.addEventListener('click', function(){
         inp.value = e.innerText;
         ul_list.classList.remove('fader');
        });
});
   </script>
</body
</html>

basti1012.bplaced.net

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

Code