Search and Dropdown / Default Выбран лучший результат из поисковой фильтрации Angular

Question

Я хочу, чтобы выпадающий или похожий на панель поиска аналогичен поиску Google Chrome. Отфильтровывая данные и выбирая по умолчанию самый верхний из выпадающего списка, он запускает

<div class="search-cont">
  <input class="form-control"  type="text" placeholder="{{'Search'| translate}}"
         [(ngModel)]="searchParam">
  <datalist>
    <option *ngFor ="let res of results" value="{{res.name}}">
  </datalist>
  <div class="custom-drop" *ngIf="searchParam.length > 1">
    <div class="search-list">
      <div class="search-header" > {{'Coins' | translate}} </div>
      <ul class="search-item" *ngFor ="let res of results" >
        <li #firstLi tabindex="0"  *ngIf="res?.name.toLowerCase().includes(searchParam.toLowerCase())&& searchParam.length > 1 || res?.symbol.toLowerCase().includes(searchParam.toLowerCase())&& searchParam.length > 1"
           (click)="onSearch(res?.slug)" (keyup.enter)="onSearch(res?.slug)"><img src="{{res?.small_icon}}"  alt="">
          {{res?.name}} <span>{{'('+res?.symbol+')'}}</span></li>
      </ul>
      <div class="search-header" *ngIf="exResults!=null && searchParam.length > 1"> {{'Exchanges'| translate}} </div>
      <ul class="search-item" *ngFor ="let res of exResults" >
        <li *ngIf="res.name.toLowerCase().includes(searchParam.toLowerCase())&& searchParam.length > 1"
            (click)="onSearchExchange(res?.slug)" (keyup.enter)="onSearchExchange(res?.slug) "><img src="{{res.icon}}" height="25px" alt="">
          {{res.name}}</li>
      </ul>
    </div>
  </div>
</div>

Есть ли более подходящий способ сделать это?