在 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);
  }
}

這是一個 combobox，在輸入的輸入中，列表被過濾。

有人可以幫我解決輸入自動完成的問題嗎？

我能夠獲取列表但無法根據輸入的輸入過濾列表或 select 列表。

我只需要過濾列表和 select 用戶在輸入框中鍵入的列表中的名稱。

Answer 1

您是否考慮過使用 angular 材料自動完成而不是帶有選項列表的 combobox？ https://material.angular.io/components/autocomplete/overview#adding-a-custom-filter