Apologies in advanced if this question has been asked before, I've gone through a few help articles but unfortunately not able to make anything work properly when it comes to my code, the answer might be a simple one, hence asking for help.

So basically I am trying to implement Smart Search (Autocomplete) functionality where you have a fixed list (Currently implemented as Select tag), when user types in characters, it narrows down the list for the user. What I've done currently is this (in html) file,

asset.component.html

<div class="form-group">
    <h5><label for="assetId" class="form-label text-right" style="margin: 10pt">Title</label></h5>
    <select id="assetId" name="id" #assetId="ngModel" required [class.is-invalid]="assetId.invalid" class="form-control is-invalid" [(ngModel)]="selectedAsset" (change)="getAssetValue()">
        <option *ngFor="let asset of assets" value="{{asset.id}}-{{asset.text}}">{{asset.text}}</option>
    </select>
</div>

For the same of example, we can assume that assets is an array with id and text fields defined under asset.component.ts file

I've looked at the following URL but as I'm very new to all this, I was unable to make this work and would appreciate if someone could help me out with this. Thank you