I am currently working on an input search box that offers autocompletion functionality by displaying an array of names. I have implemented this using the datalist tag, so when certain names are typed into the search box, it suggests names from the array. However, I am facing a challenge in customizing the CSS for the dropdown list.
This is how my component.html looks:
<input type="text" placeholder="select name" (keyup)="arrayList($event.target.value)"
id="nameId" list="nameOptions" formControlName="name">
<datalist id="nameOptions">
<option *ngFor="let name of names | async" [value]="name">
{{name}}
</option>
</datalist>
I attempted to modify the CSS in my component.css file like so:
This is the content of my component.css file:
datalist{
position:absolute;
max-height:50px;
overflow-x:hidden;
overflow-y:scroll
}
Despite my efforts, the current appearance resembles the screenshot linked below: https://i.sstatic.net/PUM3s.png