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);
}
}
Это поле со списком, в котором при вводе вводится список фильтруется.
Может ли кто-нибудь помочь мне с проблема автозаполнения ввода?
Я могу получить список, но не могу отфильтровать список или выбрать список на основе введенного ввода.
Мне просто нужно отфильтровать список и выберите имя из списка, введенного пользователем в поле ввода.