Skip to content

Commit

Permalink
feat(module:tree-select): add nzSearchFunc input function
Browse files Browse the repository at this point in the history
to specify search logic, such as matching against custom data #8707 #3478
  • Loading branch information
yejunqing committed Dec 30, 2024
1 parent 9607e11 commit 03db60c
Show file tree
Hide file tree
Showing 3 changed files with 105 additions and 0 deletions.
18 changes: 18 additions & 0 deletions components/tree-select/demo/customized-search.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
---
order: 8
title:
zh-CN: 定制搜索逻辑
en-US: customize nzSearchFunc
---

## zh-CN

可指定搜索逻辑
比如根据自定义数据进行匹配
输入1-6个s字符查看效果

## en-US

You can specify search logic, such as matching against custom data
Enter 1-6 s characters to see the effect

80 changes: 80 additions & 0 deletions components/tree-select/demo/customized-search.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { NzTreeNodeOptions } from 'ng-zorro-antd/core/tree';
import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';

@Component({
selector: 'nz-demo-tree-select-customized-search',
imports: [FormsModule, NzTreeSelectModule],
template: `
<nz-tree-select
style="width: 250px"
[(ngModel)]="value"
[nzNodes]="nodes"
[nzHideUnMatched]="true"
(ngModelChange)="onChange($event)"
nzShowSearch
[nzSearchFunc]="nzSearchFunc"
nzCheckable
nzPlaceHolder="Please select"
></nz-tree-select>
`
})
export class NzDemoTreeSelectCustomizedSearchComponent {
value: string[] = ['0-0-0'];
readonly nodes = [
{
title: 'Node1',
value: '0-0',
key: '0-0',
children: [
{
title: 'Child Node1',
value: '0-0-0',
key: '0-0-0',
isLeaf: true,
searchedText: 'ss'
}
]
},
{
title: 'Node2',
value: '0-1',
key: '0-1',
children: [
{
title: 'Child Node3',
value: '0-1-0',
key: '0-1-0',
isLeaf: true,
searchedText: 'sss'
},
{
title: 'Child Node4',
value: '0-1-1',
key: '0-1-1',
isLeaf: true,
searchedText: 'ssss'
},
{
title: 'Child Node5',
value: '0-1-2',
key: '0-1-2',
isLeaf: true,
searchedText: 'sssss'
}
]
}
];

nzSearchFunc = (inputValue: string, node: NzTreeNodeOptions): boolean => {
const nodeStr = `${node.title} ${node.searchedText}`;
node.isMatched = nodeStr.indexOf(inputValue) >= 0;
return node.isMatched;
};

onChange($event: string[]): void {
console.log($event);
}
}
7 changes: 7 additions & 0 deletions components/tree-select/tree-select.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,7 @@ const listOfPositions = [
[nzVirtualMaxBufferPx]="nzVirtualMaxBufferPx"
[nzVirtualMinBufferPx]="nzVirtualMinBufferPx"
[nzVirtualHeight]="nzVirtualHeight"
[nzSearchFunc]="nzTreeSelectSearchFunc"
(nzExpandChange)="onExpandedKeysChange($event)"
(nzClick)="nzTreeClick.emit($event)"
(nzCheckedKeysChange)="updateSelectedNodes()"
Expand Down Expand Up @@ -304,6 +305,7 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc
@Input() nzDisplayWith: (node: NzTreeNode) => string | undefined = (node: NzTreeNode) => node.title;
@Input({ transform: numberAttribute }) nzMaxTagCount!: number;
@Input() nzMaxTagPlaceholder: TemplateRef<{ $implicit: NzTreeNode[] }> | null = null;
@Input() nzSearchFunc?: (inputValue: string, node: NzTreeNodeOptions) => boolean;
@Output() readonly nzOpenChange = new EventEmitter<boolean>();
@Output() readonly nzCleared = new EventEmitter<void>();
@Output() readonly nzRemoved = new EventEmitter<NzTreeNode>();
Expand Down Expand Up @@ -360,6 +362,7 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc

onChange: OnChangeType = _value => {};
onTouched: OnTouchedType = () => {};
nzTreeSelectSearchFunc: ((node: NzTreeNodeOptions) => boolean) | undefined;

get placeHolderDisplay(): string {
return this.inputValue || this.isComposing || this.selectedNodes.length ? 'none' : 'block';
Expand Down Expand Up @@ -443,6 +446,10 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc
this.updatePosition();
}
});
const wrapNzSearchFunc = (node: NzTreeNodeOptions): boolean => {
return this.nzSearchFunc ? this.nzSearchFunc(this.inputValue, node) : false;
};
this.nzTreeSelectSearchFunc = this.nzSearchFunc ? wrapNzSearchFunc : undefined;
}

ngOnDestroy(): void {
Expand Down

0 comments on commit 03db60c

Please sign in to comment.