<div class="searching">
<input type="text" class="form-control"  (input)="getFilteredData(inputBox.value);" class="form-control"  [formControl]="inputBox">
<div id="search" tabindex="0" >
  <ul class="suggestionList">
    <li  *ngFor="let result of filteredResults | async" (click)="onUserSelected(result)" >{{result[displayField1]}} | {{result[displayField2]}} {{result[displayField3]}}</li>
  </ul>
</div>

<app-auto-complete formControlName="requestorId"
                     [ngClass]="{ 'is-invalid': submitted &&
                     requestorId.errors }"></app-auto-complete>
                  <div *ngIf="submitted && f.requestorId.errors" class="invalid-feedback">
                      <div *ngIf="f.requestorId.errors.required">Requestor ID is required</div>
                  </div>

.searching {
   width: inherit;
     position: relative;
   }
        .searching input {
          margin: 0;
         padding: 0;
           width: 100%;
          height: 30px;
        }
        .suggestionList {
        background-color: #fff;
        width: 100%;
       position: absolute;
        padding: 0;
        left: 0;
        z-index: 1000;
     }
     .suggestionList li {
      list-style-type: none;
     border: 1px solid #c5c5c5;
      cursor: pointer;
      left: 0;
      font-family: Arial,Helvetica,sans-serif;
      font-size: 1em;
      text-align: left;
     }