Wie erstelle ich eine Datalist mit CSS, die so funktioniert wie datalist
Hallo,
ich habe folgenden Code (paar Abschnitte, die nur für Verwirrung sorgen würden, habe ich herausgenommen)
Code:
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
Der hier verwendete 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>