input autocomplete in angular

Question

HTML

<div class="combobox">
    <input type="text" formControlName="mentorName" (ngModelChange)="getFilteredList()" class="combobox-input" (keyup)="onKeyPress($event)" (blur)="toggleListDisplay(0)" (focus)="toggleListDisplay(1)" placeholder="Select one..." [ngClass]="{'error': showError}">
    <span *ngIf="showError" class="error-text">
        <i>Invalid Selection.</i>
    </span>
    <div class="combobox-options" *ngIf="!listHidden">
        <list-item *ngFor="let item of response;let i = index"(click)="selectItem(i)" [ngClass]="{'selected': i===selectedIndex}">{{item}}</list-item>
    </div>
</div>

TS

getUserList(){
  this.commonAddEditTeamService.userList().subscribe((res: any) => {
    this.response = res.map(x => x.name);
    //console.log(this.response,'ressss')
    //const listOfNames = this.response.map(x=>x.name)
    //console.log(this.response,'users')
  })
}

getFilteredList() {
  this.listHidden = false;
  // this.selectedIndex = 0;
  if (!this.listHidden && this.mentorName !== undefined) {
    this.filteredList = this.response.filter((item) =>
      item.toLowerCase().startsWith(this.mentorName.toLowerCase())
    );
    console.log(this.filteredList, 'mentor')
  }
}

selectItem(ind) {
  this.mentorName = this.filteredList[ind];
  this.listHidden = true;
  this.selectedIndex = ind;
}

// navigate through the list of items
onKeyPress(event) {
  if (!this.listHidden) {
    if (event.key === 'Escape') {
      this.selectedIndex = -1;
      this.toggleListDisplay(0);
    }

    if (event.key === 'Enter') {

      this.toggleListDisplay(0);
    }
    if (event.key === 'ArrowDown') {

      this.listHidden = false;
      this.selectedIndex = (this.selectedIndex + 1) % this.filteredList.length;
      if (this.filteredList.length > 0 && !this.listHidden) {
        document.getElementsByTagName('list-item')[this.selectedIndex].scrollIntoView();
      }
    } else if (event.key === 'ArrowUp') {

      this.listHidden = false;
      if (this.selectedIndex <= 0) {
        this.selectedIndex = this.filteredList.length;
      }
      this.selectedIndex = (this.selectedIndex - 1) % this.filteredList.length;

      if (this.filteredList.length > 0 && !this.listHidden) {

        document.getElementsByTagName('list-item')[this.selectedIndex].scrollIntoView();
      }
    }
  }
}

// show or hide the dropdown list when input is focused or moves out of focus
toggleListDisplay(sender: number) {

  if (sender === 1) {
    // this.selectedIndex = -1;
    this.listHidden = false;
    this.getFilteredList();
  } else {
    // helps to select item by clicking
    setTimeout(() => {
      this.selectItem(this.selectedIndex);
      this.listHidden = true;
      if (!this.response.includes(this.mentorName)) {
        this.showError = true;
        this.filteredList = this.response;
      } else {
        this.showError = false;
      }
    }, 500);
  }
}

This is a combobox where on the input typed the list gets filtered.

Can someone help me with issue of input autocomplete?

I am able to get list but not able to filter the list or select the list on basis the of input typed.

I just need to filter the list and and select the name from the list which the user has typed in the input box.

Answer 1

Have you considered using angular material autocomplete instead of a combobox with a list of options? https://material.angular.io/components/autocomplete/overview#adding-a-custom-filter