使用自定义搜索词过滤 RadListView

Posted

技术标签:

【中文标题】使用自定义搜索词过滤 RadListView【英文标题】:Filtering a RadListView using custom search term 【发布时间】:2019-06-24 00:54:47 【问题描述】:

是否可以将过滤函数传递给可以访问局部变量“searchTerm”的 Angular Nativescript RadListView?我已经尝试了位于提供的here 的示例,但是该示例建议的是静态搜索词。

我希望对样本过滤器功能做些不同的事情;

示例

this.myFilteringFunc = (item: DataItem) => 
    return item && item.name.includes("Special Item");
;

我正在将搜索词 "Special Item" 修改为用户输入的文本框。我试过的是;

TypeScript

  // on inital load....
  this.resultsFound = this._dataItems 
                      && this._dataItems.length > 0 
                      && this._dataItems.filter(c => (c.Firstname && c.FirstName.includes(this.searchTerm)) 
                                                    || (c.LastName && c.LastName.includes(this.searchTerm))
                                                ).length > 0;
  if (this.searchTerm.length > 0) 
      if(this.resultsFound) listView.filteringFunction = this.filterByName.bind(this);
   
  else 
      listView.filteringFunction = undefined;
  



//...later, I define the filtering function like so;
filterByName(item: NameListViewModel) 
    if (!this.searchTerm)
      return true;
    
    return item 
            && ((item.FirstName && item.FirstName.includes(this.searchTerm))
                || (item.LastName && item.LastName.includes(this.searchTerm)));

;

查看

<RadListView #myListView row="0" *ngIf="resultsFound" [items]="dataItems" [groupingFunction]="groupByAge" (itemLoading)="onItemLoading($event)">
    <ng-template tkListItemTemplate let-item="item" let-i="index">
        <StackLayout class="person-card">
            <app-person-register-list-item [item]="item"></app-person-register-list-item>
        </StackLayout>
    </ng-template>
    <ng-template tkGroupTemplate let-category="category">
        <StackLayout orientation="horizontal" [ngClass]="'neutral-background':getCount(category)==''" [ngClass]="'grouping-header':getCount(category)!=''" ios:>                        
            <Label class="person-group-header" text="formatCategory(category)"></Label>
            <Label class="person-number" text="getCount(category)" verticalAlignment="center"></Label>
        </StackLayout>
    </ng-template>
</RadListView>

【问题讨论】:

【参考方案1】:

您可以简单地使用带有items 属性绑定的过滤管道。

<RadListView [items]="dataItems | filter:filterText" ...>

filterText 可能是您的动态输入。过滤管可能看起来像

import  Pipe, PipeTransform  from "@angular/core";

@Pipe(
    name: "filter"
)
export class FilterPipe implements PipeTransform 

    transform(source: any, filterText: string): any 
        if (!filterText) 
            return source;
        

        const result: Array<any> = new Array<any>(),
            filterReg: RegExp = new RegExp(filterText, "i");

        source.forEach((item) => 
            if (filterReg.test(item.title)) 
                result.push(item);
            
        );

        return result;
    

【讨论】:

以上是关于使用自定义搜索词过滤 RadListView的主要内容,如果未能解决你的问题,请参考以下文章

使用 Swift 4 搜索自定义表格单元格和过滤器

使用 UISearchbar 和过滤后自定义新表

为啥我在 vue.js 中的自定义搜索过滤器不起作用?

如何使用 ag-grid 自定义过滤器组件构建查找搜索功能

如何在 Swift 中使用搜索栏过滤具有自定义单元格的 UITableView 的内容?

如何自定义 pcm 后台以过滤 Hybris 中的超类别搜索结果