feat(module:tree-select): add nzSearchFunc input function #8707 #3478

components/tree-select/demo/customized-search.md

@@ -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
+

components/tree-select/demo/customized-search.ts

@@ -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);
+  }
+}

components/tree-select/tree-select.component.ts

@@ -148,6 +148,7 @@ const listOfPositions = [
           [nzVirtualMaxBufferPx]="nzVirtualMaxBufferPx"
           [nzVirtualMinBufferPx]="nzVirtualMinBufferPx"
           [nzVirtualHeight]="nzVirtualHeight"
+          [nzSearchFunc]="nzTreeSelectSearchFunc"
           (nzExpandChange)="onExpandedKeysChange($event)"
           (nzClick)="nzTreeClick.emit($event)"
           (nzCheckedKeysChange)="updateSelectedNodes()"
@@ -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>();
@@ -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';
@@ -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 {