Is it posibble to display a <datalist> content using another tag/element, function, or any other than the <input> it is attached to?

I'm building a form with angular and typescript, but there is a field which is meant to be open but predictive, however now the user wants the input text field to look like a dropdown. (by the way we are not able/allowed to use a normal <select> due some incompatibilities with our CSS library)

So I superposed an icon within the input using relative position, changed the cursor and it now looks like and actual <select>.

However it's only the visual what's done, I need the icon to act as a button to display the content of the predictions from <datalist>, because the contents are only shown when the cursor is in the input and the user types or hits the arrow-down key.

Is there a way to achieve that, I couldn't find a solution on internet, so I tried the following, calling random methods from the DOM with no success...

HTML:

<div class="col-12-3">
  <p class="center">
    <label for="site-lock-field">Site Loc ID:<span class="required">*</span></label>
    <span>
      <input (input)="requestData.siteLock = form.controls['siteLockField'].value" formControlName="siteLockField"
             id="site-lock-field" list="site-lock-list" maxlength="7" name="siteLockField" placeholder="Select an Option" type="text"/>
      <datalist #site_lock_list id="site-lock-list">
        <option *ngFor="let siteLockId of siteLockData" [value]="siteLockId">· {{siteLockId}}</option>
      </datalist>
      <span (click)="showDataList('site_lock_list')" class="sort-down-link dropdown_fixed_icon textcolor-blue-50"></span>
    </span>
  </p>
</div>

TypeScript:

@Component({
  selector: 'app-request-form',
  templateUrl: './request-form.component.html',
  styleUrls: ['./request-form.component.css']
})
export class RequestFormComponent {
  @ViewChild('site_lock_list') siteLockList: ElementRef;

  // Show Data Lists
  showDataList(dataList) {
    console.log(dataList);
    // this[dataList].nativeElement.focus();
    this.siteLockList.nativeElement.display();
  }
}

Any idea how can I do this, any suggestion or workaround?