javascript - 按向下或向上箭头键仅突出显示过滤的项目

Question

我正在尝试为自己的目的创建一个自动完成功能。这里过滤工作正常。我还想突出显示所选项目。但有一个问题。首先看一下我的代码，然后我会详细解释问题。

这是组件:

import { Component, OnInit } from '@angular/core';
import { Person } from '../../Models/person';

@Component({
  selector: 'app-auto-complete',
  templateUrl: './auto-complete.component.html',
  styleUrls: ['./auto-complete.component.css']

})
export class AutoCompleteComponent implements OnInit{

    constructor() {}

    showSuggestions: boolean;
    query: string;
    people: Person[];
    selectedRow: Number;

    ngOnInit() {
        this.query = '';
        this.people  = [
            new Person ('Shane', 'Watson', 'Australia'),
            new Person ('David', 'Warner', 'Australia'),
            new Person ('Ricky', 'Ponting', 'Australia'),
            new Person ('Adam', 'Gilchrist', 'Australia'),
            new Person ('Andrew', 'Symonds', 'Australia'),
            new Person ('Sachin', 'Tendulkar', 'India'),
            new Person ('Rahul', 'Dravid', 'India'),
            new Person ('Virender', 'Sehwag', 'India'),
            new Person ('Mahendra', 'Dhoni', 'India'),
            new Person ('Virat', 'Kohli', 'India'),
            new Person ('Gautam', 'Gambhir', 'India')
        ];
    }

    inputFocused() {
        this.showSuggestions = true;
    }

    inputBlurred() {
        this.showSuggestions = false;
    }

    setClickedItem(index: Number) {
        this.selectedRow = index;
        this.query = this.people[+index].firstName;
        this.showSuggestions = false;        
    }

    setSelectedItem(event) {
        if(event.keyCode == 40) { //down arrow
            if(this.selectedRow == null || this.selectedRow == undefined) {
                this.selectedRow = 0;
            } else if(this.selectedRow >= this.people.length - 1){
                this.selectedRow = 0;
            } else {
                this.selectedRow = +this.selectedRow + 1;
            }
        } else if(event.keyCode == 38) { //up arrow
            if(this.selectedRow == null || this.selectedRow == undefined) {
                this.selectedRow = this.people.length - 1
            } else if(this.selectedRow <= 0) {
                this.selectedRow = this.people.length - 1;
            } else {
                this.selectedRow = +this.selectedRow - 1;
            }
        } else if(event.keyCode == 9) { //TAB
            if(!(this.selectedRow == null || this.selectedRow == undefined)) {
                this.query = this.people[+this.selectedRow].firstName;
            }                    
            this.showSuggestions = false;            
        }
    }
}

这是模板:

<div>
  <input type="text" (focus)="inputFocused()" [(ngModel)]="query" (keydown)="setSelectedItem($event)" />
  <table *ngIf="showSuggestions" (blur)="inputBlurred()">
    <thead>
      <tr>
        <td>First Name</td>
        <td>Last Name</td>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let person of (people | textFilter : query); let i = index"
          (click)="setClickedItem(i)" [ngClass]="{'active': (i == selectedRow)}">
        <td>{{person.firstName}}</td>
        <td>{{person.lastName}}</td>
      </tr>
    </tbody>
  </table>
</div>      

这是样式表:

table tr.active td {
  background-color:#123456 !important;
  color: white;
}

问题:

当我按键盘上的向下箭头或向上箭头时，下一个或上一个项目会突出显示。没关系。但是，当我使用输入框搜索，然后如果我按向下箭头或向上箭头，人员集合中的下一个或上一个项目将突出显示，它也会突出显示不可见的项目。我想要的只是通过按向下箭头或向上箭头突出显示过滤的项目。

Answer 1

在我看来，错误是以下行:

    } else if(this.selectedRow >= this.people.length - 1){

或更具体地说明包含 this.people.length 的所有行。

别忘了。即使您不显示人物，人物的长度也不会改变。这意味着仅当您遍历所有“过滤”人员时，selectedRowIndex 才会重置为 0。所以你必须得到过滤后的人的长度而不是全部。

如果您需要此实现方面的帮助，请随时询问。但我认为你可以自己解决这个问题。

我对类似事情的方法是:

• 使管道可注入(inject)。
• 将其注入(inject)到组件中
• 创建新属性 (filteredPeople)
• this.filteredPeople = this.pipe.transform(this.people,/* PIPE Parms */)
• 调整 html 以显示过滤后的People
• 调整所有使用people.length和filteredPeople.length的地方

希望这有帮助。