title: Is it posibble to display a <datalist> content using another tag/element, function, or any other than the <input> it is attached to?
body: <p>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 <code>&lt;select&gt;</code> due some incompatibilities with our CSS library)</p>
  <p>So I superposed an icon within the input using relative position, changed the cursor and it now looks like and actual <code>&lt;select&gt;</code>.</p>
  <p><a href="https://i.stack.imgur.com/6fc2h.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6fc2h.png" alt="Renderized datalist" /></a></p>
  <p>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 <code>&lt;datalist&gt;</code>, because the contents are only shown when the cursor is in the input and the user types or hits the arrow-down key.</p>
  <p>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...</p>
  <p>HTML:</p>
  <pre><code>&lt;div class=&quot;col-12-3&quot;&gt;
    &lt;p class=&quot;center&quot;&gt;
      &lt;label for=&quot;site-lock-field&quot;&gt;Site Loc ID:&lt;span class=&quot;required&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
      &lt;span&gt;
        &lt;input (input)=&quot;requestData.siteLock = form.controls['siteLockField'].value&quot; formControlName=&quot;siteLockField&quot;
               id=&quot;site-lock-field&quot; list=&quot;site-lock-list&quot; maxlength=&quot;7&quot; name=&quot;siteLockField&quot; placeholder=&quot;Select an Option&quot; type=&quot;text&quot;/&gt;
        &lt;datalist #site_lock_list id=&quot;site-lock-list&quot;&gt;
          &lt;option *ngFor=&quot;let siteLockId of siteLockData&quot; [value]=&quot;siteLockId&quot;&gt;· {{siteLockId}}&lt;/option&gt;
        &lt;/datalist&gt;
        &lt;span (click)=&quot;showDataList('site_lock_list')&quot; class=&quot;sort-down-link dropdown_fixed_icon textcolor-blue-50&quot;&gt;&lt;/span&gt;
      &lt;/span&gt;
    &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  <p>TypeScript:</p>
  <pre><code>@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();
    }
  }
  </code></pre>
  <p>Any idea how can I do this, any suggestion or workaround?</p>