如何将下拉框选择绑定到搜索框,然后通过线性搜索来筛选ngx数据表中的所选项目?

时间:2019-05-13 22:44:13

标签: html angular typescript angular7 linear-search

我有一个下拉列表,列表中有一项。当我单击它时,将按该项目对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="&#xf002; 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;
    }
  }
}

当我选择“人物”时,可以在搜索框中输入字母并缩小搜索范围。

0 个答案:

没有答案