我有一个下拉列表,列表中有一项。当我单击它时,将按该项目对ngx数据表进行排序。一旦选择了该项目,我就需要搜索框来根据人的输入来缩小结果的范围,本质上就是进行线性搜索。如何将下拉列表连接到搜索框,以便它选择要缩小搜索范围的项目?
.html
<button class="btn btn-light filter-button" ngbDropdownToggle>Select an Item</button>
<div ngbDropdownMenu aria-labelledby="sInput" >
<button ngbDropdownItem *ngFor="let column of columns" (click)="sort(column.prop)">
<div *ngIf="column.prop === 'people'">{{column.name}}</div>
</button>
</div>
</div>
<div>
<input type="text" class="sInput" placeholder=" Search Chosen Column" #columnHeaderSearch (keyup)="search(columnHeaderSearch, 'people')" /> </div>
.ts
search(sText, item) {
if (sText.length > 0) {
if (item === 'people') {
this.tRow = this.rows.filter((row) => { return row['people'].toLowerCase().indexOf(sText.toLowerCase()) > -1; });
}
else if (sText.length < 1) {
if (item === 'people') {
this.zeroResults = true;
} else {
this.zeroResults = false;
}
}
}
当我选择“人物”时,可以在搜索框中输入字母并缩小搜索范围。