戰(zhàn)：從 nzShowSearch 到自定義 filter/sorter)
UI組件前端【免費(fèi)下載鏈接】ng-zorro-antdAngular UI Component Library based on Ant Design項(xiàng)目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd點(diǎn)擊查看免費(fèi)下載導(dǎo)讀本文圍繞 ng-zorro-antd 級(jí)聯(lián)選擇組件Cascader的搜索能力展開講解如何通過nzShowSearch一行配置開啟輸入即搜、直接選中的搜索模式并結(jié)合倉庫源碼剖析搜索模式下的過濾、排序、高亮與選中閉環(huán)。讀完本文你將掌握 Cascader 搜索的基本用法、自定義過濾與排序函數(shù)NzShowSearchOptions的完整寫法以及搜索模式在底層是如何切換數(shù)據(jù)列columns的。一、功能概述為什么需要給 Cascader 加搜索Cascader 適用于從一組相關(guān)聯(lián)的數(shù)據(jù)集合中進(jìn)行選擇的場景如省市區(qū)、公司層級(jí)、事物分類見 組件文檔。當(dāng)層級(jí)較深、選項(xiàng)較多時(shí)逐級(jí)點(diǎn)開菜單查找目標(biāo)選項(xiàng)成本很高。搜索模式允許用戶直接在輸入框中鍵入關(guān)鍵字命中的葉子節(jié)點(diǎn)路徑會(huì)被扁平化展示在單列結(jié)果中點(diǎn)選即可完成整條路徑的選擇。對(duì)應(yīng)的演示文檔 search.md 描述即為可以直接搜索選項(xiàng)并選擇 / Search and select an option directly。完整示例代碼位于 search.ts。二、最小可用示例開啟搜索并選中在nz-cascader上增加[nzShowSearch]true即可開啟搜索import { Component } from angular/core; import { FormsModule } from angular/forms; import { NzCascaderModule, NzCascaderOption } from ng-zorro-antd/cascader; const options: NzCascaderOption[] [ { value: zhejiang, label: Zhejiang, children: [ { value: hangzhou, label: Hangzhou, children: [ { value: xihu, label: West Lake, isLeaf: true } ] }, { value: ningbo, label: Ningbo, isLeaf: true, disabled: true } ] }, { value: jiangsu, label: Jiangsu, children: [ { value: nanjing, label: Nanjing, children: [ { value: zhonghuamen, label: Zhong Hua Men, isLeaf: true } ] } ] } ]; Component({ selector: nz-demo-cascader-search, imports: [FormsModule, NzCascaderModule], template: nz-cascader [nzOptions]nzOptions [(ngModel)]values [nzShowSearch]true (ngModelChange)onChanges($event) / }) export class NzDemoCascaderSearchComponent { readonly nzOptions: NzCascaderOption[] options; values: string[] | null null; onChanges(values: string[]): void { console.log(values, this.values); } }要點(diǎn)說明數(shù)據(jù)源使用NzCascaderOption[]葉子節(jié)點(diǎn)通過isLeaf: true標(biāo)記非葉子節(jié)點(diǎn)通過children展開下一級(jí)類型定義見 typings.ts。values的類型為string[]即一條完整路徑的值數(shù)組例如選擇West Lake后得到[zhejiang, hangzhou, xihu]。示例中Ningbo被標(biāo)記為disabled: true在普通瀏覽與搜索結(jié)果中均不可選——搜索模式下禁用狀態(tài)會(huì)被繼承傳遞見下文源碼分析。事件綁定使用[(ngModel)](ngModelChange)與表單雙向綁定體系完全兼容。三、核心 APInzShowSearch 的三種形態(tài)組件中nzShowSearch的輸入定義位于 cascader.component.tsInput() nzShowSearch: boolean | NzShowSearchOptions false;默認(rèn)值為false不顯示搜索輸入框。它接受布爾值或?qū)ο髢煞N形態(tài)取值說明false關(guān)閉搜索默認(rèn)true開啟搜索使用默認(rèn)的過濾與排序邏輯NzShowSearchOptions對(duì)象開啟搜索并自定義filter/sorter函數(shù)對(duì)象形態(tài)的接口定義如下見 typings.tsexport type NzCascaderFilter (searchValue: string, path: NzCascaderOption[]) boolean; export type NzCascaderSorter (a: NzCascaderOption[], b: NzCascaderOption[], inputValue: string) number; export interface NzShowSearchOptions { filter?: NzCascaderFilter; sorter?: NzCascaderSorter; }對(duì)應(yīng)組件文檔中的參數(shù)表doc/index.zh-CN.md為參數(shù)說明類型默認(rèn)值filter可選選擇是否保留選項(xiàng)的過濾函數(shù)每級(jí)菜單的選項(xiàng)都會(huì)被匹配(inputValue: string, path: NzCascaderOption[]): boolean-sorter可選按照到每個(gè)最終選項(xiàng)的路徑進(jìn)行排序默認(rèn)按照原始數(shù)據(jù)的順序(a: NzCascaderOption[], b: NzCascaderOption[], inputValue: string): number-注意文檔中明確說明nzShowSearch不能和nzLoadData同時(shí)使用——?jiǎng)討B(tài)加載異步數(shù)據(jù)源與本地全量搜索在數(shù)據(jù)獲取方式上沖突。默認(rèn) filter對(duì)整條路徑做包含匹配當(dāng)nzShowSearch為true時(shí)使用的是內(nèi)置默認(rèn)過濾函數(shù)。其實(shí)現(xiàn)位于 cascader.service.tsconst defaultFilter: NzCascaderFilter (i, p) p.some(o { const label this.getOptionLabel(o); return !!label label.indexOf(i) ! -1; });這里的p是從根到當(dāng)前候選節(jié)點(diǎn)的完整路徑數(shù)組因此默認(rèn)行為是對(duì)路徑上每一級(jí)的 label 做子串匹配——只要某一級(jí)的 label 包含搜索詞該葉子節(jié)點(diǎn)就會(huì)作為結(jié)果保留。這也是文檔所述每級(jí)菜單的選項(xiàng)都會(huì)被匹配的具體含義。getOptionLabel會(huì)讀取nzLabelProperty指定的屬性默認(rèn)label因此自定義字段名時(shí)搜索同樣生效。自定義 filter忽略大小寫如果希望搜索時(shí)忽略大小寫可傳入自定義filter示例同樣來自組件文檔const filter: NzCascaderFilter (i, p) { return p.some(o { const label o.label; return !!label label.toLowerCase().indexOf(i.toLowerCase()) ! -1; }); };用法nz-cascader [nzOptions]nzOptions [(ngModel)]values [nzShowSearch]{ filter: filter } /filter返回true表示保留該選項(xiàng)返回false則過濾掉。由于它是純函數(shù)你可以自由擴(kuò)展例如按value匹配、支持模糊匹配、首字母匹配等。自定義 sorter控制結(jié)果排序搜索命中后默認(rèn)按原始數(shù)據(jù)順序展示結(jié)果。若希望按路徑相關(guān)度排序傳入sorterimport { NzCascaderOption, NzCascaderSorter } from ng-zorro-antd/cascader; const sorter: NzCascaderSorter (a, b, inputValue) { // a、b 為兩條命中路徑inputValue 為當(dāng)前搜索詞 const scoreA a.some(o o.label?.startsWith(inputValue)) ? 0 : 1; const scoreB b.some(o o.label?.startsWith(inputValue)) ? 0 : 1; return scoreA - scoreB; // 前綴命中的路徑排在前面 };sorter的返回值遵循Array.prototype.sort的語義負(fù)數(shù)表示a在前正數(shù)表示b在前。可以從搜索結(jié)果中提取輸入關(guān)鍵字inputValue參數(shù)來設(shè)計(jì)加權(quán)策略例如前綴命中 中間命中 路徑層級(jí)更淺。四、源碼級(jí)原理搜索模式的完整閉環(huán)4.1 從輸入到搜索模式的切換搜索模式由組件與服務(wù)共同維護(hù)。用戶在輸入框鍵入內(nèi)容時(shí)inputValue的 setter 會(huì)觸發(fā)toggleSearchingModecascader.component.tsset inputValue(inputValue: string) { this.inputString inputValue; this.toggleSearchingMode(!!inputValue); } private toggleSearchingMode(toSearching: boolean): void { if (this.inSearchingMode ! toSearching) { this.cascaderService.setSearchingMode(toSearching); } if (this.inSearchingMode) { this.cascaderService.prepareSearchOptions(this.inputValue); } }輸入為空 → 退出搜索模式恢復(fù)級(jí)聯(lián)列輸入非空 → 進(jìn)入搜索模式并即時(shí)調(diào)用prepareSearchOptions重新過濾。輸入框本身復(fù)用 Select 組件的NzSelectSearchComponent模板見 cascader.component.ts支持 IME 組合輸入isComposing與自動(dòng)聚焦。4.2 列快照搜索不破壞原始級(jí)聯(lián)狀態(tài)進(jìn)入搜索模式前服務(wù)會(huì)把當(dāng)前級(jí)聯(lián)列保存為快照cascader.service.tssetSearchingMode(toSearching: boolean): void { this.inSearchingMode toSearching; if (toSearching) { this.clearSearchOptions(); // 若搜索期間重置 nzOptions先清理緩存 this.columnSnapshot [...this.columns]; // 保存多列快照 this.activatedNodes []; } else { // 退出搜索恢復(fù)快照列并重建已選中路徑的激活狀態(tài) ... } }這意味著搜索結(jié)果的展示是臨時(shí)的搜索結(jié)束后組件會(huì)恢復(fù)原來的多列級(jí)聯(lián)視圖并重新激活已選中節(jié)點(diǎn)所在路徑trackAncestorColumnData/trackAncestorActivatedNodes。4.3 過濾與單列結(jié)果prepareSearchOptionscascader.service.ts完成核心過濾邏輯遞歸遍歷第一列的全部根節(jié)點(diǎn)loopParent處理非葉子、loopChild處理葉子對(duì)每個(gè)候選節(jié)點(diǎn)用filter(searchValue, path)判斷是否命中命中則記錄其路徑命中節(jié)點(diǎn)的title會(huì)被臨時(shí)改寫為路徑串如Zhejiang / Hangzhou / West Lake用于結(jié)果展示若有sorter按路徑數(shù)組排序最后把結(jié)果壓平為單列this.columns [results]并觸發(fā)重繪。同時(shí)路徑上任意節(jié)點(diǎn)的disabled狀態(tài)會(huì)沿路徑傳遞forceDisabled保證搜索結(jié)果中禁用路徑的葉子同樣不可選——這正是示例中Ningbo即使被搜索到也無法選中的原因。4.4 選中與退出搜索搜索模式下點(diǎn)擊命中項(xiàng)時(shí)組件判斷inSearchingMode后走搜索專用選中路徑cascader.component.tsonOptionClick(node, columnIndex, event) { ... this.inSearchingMode ? this.cascaderService.setSearchOptionSelected(node, this.nzMultiple) : this.cascaderService.setNodeActivated(node, columnIndex, !this.nzMultiple); }setSearchOptionSelectedcascader.service.ts在完成選中后通過$quitSearching通知組件清空輸入框、恢復(fù)下拉寬度樣式并觸發(fā)重繪——用戶看到的直觀效果是點(diǎn)選搜索結(jié)果后輸入框立即清空、級(jí)聯(lián)視圖還原。另外兩點(diǎn)與搜索強(qiáng)相關(guān)的實(shí)現(xiàn)細(xì)節(jié)空結(jié)果展示搜索無命中時(shí)下拉展示空態(tài)。setDropdownStylescascader.component.ts會(huì)依據(jù)搜索模式且無結(jié)果判斷shouldShowEmpty并將下拉寬度對(duì)齊輸入框?qū)挾葍?nèi)容由nzNotFoundContent或nzEmbedEmpty兜底。搜索模式下的高亮渲染選項(xiàng)時(shí)NzCascaderOptionComponent接收[highlightText]inSearchingMode ? inputValue : cascader.component.ts即僅在搜索模式下對(duì)命中關(guān)鍵字做高亮展示普通級(jí)聯(lián)瀏覽時(shí)不做高亮。鍵盤支持搜索模式下BACKSPACE、LEFT/RIGHT_ARROW保留輸入框原生編輯能力cascader.component.tsENTER選中當(dāng)前高亮結(jié)果UP/DOWN在結(jié)果間移動(dòng)保證純鍵盤可用。五、與其他選項(xiàng)的聯(lián)動(dòng)及注意事項(xiàng)場景結(jié)論多選模式nzMultiple與搜索可同時(shí)開啟搜索命中項(xiàng)會(huì)進(jìn)入多選標(biāo)簽列表選中后菜單保持展開源碼中$nodeSelected訂閱按!this.nzMultiple決定是否關(guān)閉菜單動(dòng)態(tài)加載nzLoadData與nzShowSearch不可同時(shí)使用組件文檔明確說明如需搜索大型遠(yuǎn)程數(shù)據(jù)可自行實(shí)現(xiàn)搜索接口 nzOptions重建自定義字段默認(rèn) filter 通過nzLabelProperty讀取 label自定義字段名后搜索依然按真實(shí) label 匹配表單狀態(tài)搜索框外觀與禁用nzDisabled、校驗(yàn)狀態(tài)nzStatus、形態(tài)變體nzVariant完全繼承 Cascader 主組件樣式體系選中回調(diào)無論普通選中還是搜索選中都會(huì)統(tǒng)一走ngModelChange/nzSelectionChange業(yè)務(wù)無需區(qū)分來源六、小結(jié)Cascader 的搜索功能是級(jí)聯(lián)瀏覽 扁平搜索兩種交互的融合nzShowSearch一行開啟內(nèi)置 filter 對(duì)路徑逐級(jí)匹配需要更精細(xì)的控制時(shí)NzShowSearchOptions的filter與sorter提供完全自定義的空間。底層實(shí)現(xiàn)上cascader.service.ts 通過列快照、路徑映射與$quitSearching事件保證了搜索態(tài)與級(jí)聯(lián)態(tài)的無縫切換且不破壞已選值與禁用規(guī)則。配合鍵盤導(dǎo)航、關(guān)鍵字高亮與空態(tài)兜底搜索模式讓深層級(jí)聯(lián)數(shù)據(jù)的選取體驗(yàn)大幅提升。贊分享UI組件前端【免費(fèi)下載鏈接】ng-zorro-antdAngular UI Component Library based on Ant Design項(xiàng)目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd點(diǎn)擊查看免費(fèi)下載相關(guān)推薦PPT Master SVG圖表模板指南33種圖表3步做出可編輯PPTPPT Master SVG圖表模板指南33種圖表3步做出可編輯PPT PPT Master是一個(gè)AI驅(qū)動(dòng)的演示文稿工具把文檔變成可編輯的PPT。它自帶3UI組件前端ng-zorro-antd Cascader 自定義校驗(yàn)狀態(tài)nzStatus實(shí)戰(zhàn)指南ng zorro antd Cascader 自定義校驗(yàn)狀態(tài)nzStatus實(shí)戰(zhàn)指南 nzStatus 是 ng zorro antd Cascader級(jí)UI組件前端ng-zorro-antd Cascader 響應(yīng)式表單實(shí)戰(zhàn)從表單綁定到 Reset 重置清空ng zorro antd Cascader 響應(yīng)式表單實(shí)戰(zhàn)從表單綁定到 Reset 重置清空 導(dǎo)讀 本文以 ng zorro antd 組件庫中 cascaUI組件前端上一篇gh_mirrors/exam/examples優(yōu)化技術(shù)模型層融合策略下一篇揭秘gh_mirrors/v41/v4GatsbyReactMarkdown靜態(tài)網(wǎng)站終極指南創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 ng-zorro-antd Cascader 搜索功能實(shí)戰(zhàn)：從 nzShowSearch 到自定義 filter/sorter
UI組件前端【免費(fèi)下載鏈接】ng-zorro-antdAngular UI Component Library based on Ant Design項(xiàng)目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd點(diǎn)擊查看免費(fèi)下載導(dǎo)讀本文圍繞 ng-zorro-antd 級(jí)聯(lián)選擇組件Cascader的搜索能力展開講解如何通過nzShowSearch一行配置開啟輸入即搜、直接選中的搜索模式并結(jié)合倉庫源碼剖析搜索模式下的過濾、排序、高亮與選中閉環(huán)。讀完本文你將掌握 Cascader 搜索的基本用法、自定義過濾與排序函數(shù)NzShowSearchOptions的完整寫法以及搜索模式在底層是如何切換數(shù)據(jù)列columns的。一、功能概述為什么需要給 Cascader 加搜索Cascader 適用于從一組相關(guān)聯(lián)的數(shù)據(jù)集合中進(jìn)行選擇的場景如省市區(qū)、公司層級(jí)、事物分類見 組件文檔。當(dāng)層級(jí)較深、選項(xiàng)較多時(shí)逐級(jí)點(diǎn)開菜單查找目標(biāo)選項(xiàng)成本很高。搜索模式允許用戶直接在輸入框中鍵入關(guān)鍵字命中的葉子節(jié)點(diǎn)路徑會(huì)被扁平化展示在單列結(jié)果中點(diǎn)選即可完成整條路徑的選擇。對(duì)應(yīng)的演示文檔 search.md 描述即為可以直接搜索選項(xiàng)并選擇 / Search and select an option directly。完整示例代碼位于 search.ts。二、最小可用示例開啟搜索并選中在nz-cascader上增加[nzShowSearch]true即可開啟搜索import { Component } from angular/core; import { FormsModule } from angular/forms; import { NzCascaderModule, NzCascaderOption } from ng-zorro-antd/cascader; const options: NzCascaderOption[] [ { value: zhejiang, label: Zhejiang, children: [ { value: hangzhou, label: Hangzhou, children: [ { value: xihu, label: West Lake, isLeaf: true } ] }, { value: ningbo, label: Ningbo, isLeaf: true, disabled: true } ] }, { value: jiangsu, label: Jiangsu, children: [ { value: nanjing, label: Nanjing, children: [ { value: zhonghuamen, label: Zhong Hua Men, isLeaf: true } ] } ] } ]; Component({ selector: nz-demo-cascader-search, imports: [FormsModule, NzCascaderModule], template: nz-cascader [nzOptions]nzOptions [(ngModel)]values [nzShowSearch]true (ngModelChange)onChanges($event) / }) export class NzDemoCascaderSearchComponent { readonly nzOptions: NzCascaderOption[] options; values: string[] | null null; onChanges(values: string[]): void { console.log(values, this.values); } }要點(diǎn)說明數(shù)據(jù)源使用NzCascaderOption[]葉子節(jié)點(diǎn)通過isLeaf: true標(biāo)記非葉子節(jié)點(diǎn)通過children展開下一級(jí)類型定義見 typings.ts。values的類型為string[]即一條完整路徑的值數(shù)組例如選擇West Lake后得到[zhejiang, hangzhou, xihu]。示例中Ningbo被標(biāo)記為disabled: true在普通瀏覽與搜索結(jié)果中均不可選——搜索模式下禁用狀態(tài)會(huì)被繼承傳遞見下文源碼分析。事件綁定使用[(ngModel)](ngModelChange)與表單雙向綁定體系完全兼容。三、核心 APInzShowSearch 的三種形態(tài)組件中nzShowSearch的輸入定義位于 cascader.component.tsInput() nzShowSearch: boolean | NzShowSearchOptions false;默認(rèn)值為false不顯示搜索輸入框。它接受布爾值或?qū)ο髢煞N形態(tài)取值說明false關(guān)閉搜索默認(rèn)true開啟搜索使用默認(rèn)的過濾與排序邏輯NzShowSearchOptions對(duì)象開啟搜索并自定義filter/sorter函數(shù)對(duì)象形態(tài)的接口定義如下見 typings.tsexport type NzCascaderFilter (searchValue: string, path: NzCascaderOption[]) boolean; export type NzCascaderSorter (a: NzCascaderOption[], b: NzCascaderOption[], inputValue: string) number; export interface NzShowSearchOptions { filter?: NzCascaderFilter; sorter?: NzCascaderSorter; }對(duì)應(yīng)組件文檔中的參數(shù)表doc/index.zh-CN.md為參數(shù)說明類型默認(rèn)值filter可選選擇是否保留選項(xiàng)的過濾函數(shù)每級(jí)菜單的選項(xiàng)都會(huì)被匹配(inputValue: string, path: NzCascaderOption[]): boolean-sorter可選按照到每個(gè)最終選項(xiàng)的路徑進(jìn)行排序默認(rèn)按照原始數(shù)據(jù)的順序(a: NzCascaderOption[], b: NzCascaderOption[], inputValue: string): number-注意文檔中明確說明nzShowSearch不能和nzLoadData同時(shí)使用——?jiǎng)討B(tài)加載異步數(shù)據(jù)源與本地全量搜索在數(shù)據(jù)獲取方式上沖突。默認(rèn) filter對(duì)整條路徑做包含匹配當(dāng)nzShowSearch為true時(shí)使用的是內(nèi)置默認(rèn)過濾函數(shù)。其實(shí)現(xiàn)位于 cascader.service.tsconst defaultFilter: NzCascaderFilter (i, p) p.some(o { const label this.getOptionLabel(o); return !!label label.indexOf(i) ! -1; });這里的p是從根到當(dāng)前候選節(jié)點(diǎn)的完整路徑數(shù)組因此默認(rèn)行為是對(duì)路徑上每一級(jí)的 label 做子串匹配——只要某一級(jí)的 label 包含搜索詞該葉子節(jié)點(diǎn)就會(huì)作為結(jié)果保留。這也是文檔所述每級(jí)菜單的選項(xiàng)都會(huì)被匹配的具體含義。getOptionLabel會(huì)讀取nzLabelProperty指定的屬性默認(rèn)label因此自定義字段名時(shí)搜索同樣生效。自定義 filter忽略大小寫如果希望搜索時(shí)忽略大小寫可傳入自定義filter示例同樣來自組件文檔const filter: NzCascaderFilter (i, p) { return p.some(o { const label o.label; return !!label label.toLowerCase().indexOf(i.toLowerCase()) ! -1; }); };用法nz-cascader [nzOptions]nzOptions [(ngModel)]values [nzShowSearch]{ filter: filter } /filter返回true表示保留該選項(xiàng)返回false則過濾掉。由于它是純函數(shù)你可以自由擴(kuò)展例如按value匹配、支持模糊匹配、首字母匹配等。自定義 sorter控制結(jié)果排序搜索命中后默認(rèn)按原始數(shù)據(jù)順序展示結(jié)果。若希望按路徑相關(guān)度排序傳入sorterimport { NzCascaderOption, NzCascaderSorter } from ng-zorro-antd/cascader; const sorter: NzCascaderSorter (a, b, inputValue) { // a、b 為兩條命中路徑inputValue 為當(dāng)前搜索詞 const scoreA a.some(o o.label?.startsWith(inputValue)) ? 0 : 1; const scoreB b.some(o o.label?.startsWith(inputValue)) ? 0 : 1; return scoreA - scoreB; // 前綴命中的路徑排在前面 };sorter的返回值遵循Array.prototype.sort的語義負(fù)數(shù)表示a在前正數(shù)表示b在前。可以從搜索結(jié)果中提取輸入關(guān)鍵字inputValue參數(shù)來設(shè)計(jì)加權(quán)策略例如前綴命中 中間命中 路徑層級(jí)更淺。四、源碼級(jí)原理搜索模式的完整閉環(huán)4.1 從輸入到搜索模式的切換搜索模式由組件與服務(wù)共同維護(hù)。用戶在輸入框鍵入內(nèi)容時(shí)inputValue的 setter 會(huì)觸發(fā)toggleSearchingModecascader.component.tsset inputValue(inputValue: string) { this.inputString inputValue; this.toggleSearchingMode(!!inputValue); } private toggleSearchingMode(toSearching: boolean): void { if (this.inSearchingMode ! toSearching) { this.cascaderService.setSearchingMode(toSearching); } if (this.inSearchingMode) { this.cascaderService.prepareSearchOptions(this.inputValue); } }輸入為空 → 退出搜索模式恢復(fù)級(jí)聯(lián)列輸入非空 → 進(jìn)入搜索模式并即時(shí)調(diào)用prepareSearchOptions重新過濾。輸入框本身復(fù)用 Select 組件的NzSelectSearchComponent模板見 cascader.component.ts支持 IME 組合輸入isComposing與自動(dòng)聚焦。4.2 列快照搜索不破壞原始級(jí)聯(lián)狀態(tài)進(jìn)入搜索模式前服務(wù)會(huì)把當(dāng)前級(jí)聯(lián)列保存為快照cascader.service.tssetSearchingMode(toSearching: boolean): void { this.inSearchingMode toSearching; if (toSearching) { this.clearSearchOptions(); // 若搜索期間重置 nzOptions先清理緩存 this.columnSnapshot [...this.columns]; // 保存多列快照 this.activatedNodes []; } else { // 退出搜索恢復(fù)快照列并重建已選中路徑的激活狀態(tài) ... } }這意味著搜索結(jié)果的展示是臨時(shí)的搜索結(jié)束后組件會(huì)恢復(fù)原來的多列級(jí)聯(lián)視圖并重新激活已選中節(jié)點(diǎn)所在路徑trackAncestorColumnData/trackAncestorActivatedNodes。4.3 過濾與單列結(jié)果prepareSearchOptionscascader.service.ts完成核心過濾邏輯遞歸遍歷第一列的全部根節(jié)點(diǎn)loopParent處理非葉子、loopChild處理葉子對(duì)每個(gè)候選節(jié)點(diǎn)用filter(searchValue, path)判斷是否命中命中則記錄其路徑命中節(jié)點(diǎn)的title會(huì)被臨時(shí)改寫為路徑串如Zhejiang / Hangzhou / West Lake用于結(jié)果展示若有sorter按路徑數(shù)組排序最后把結(jié)果壓平為單列this.columns [results]并觸發(fā)重繪。同時(shí)路徑上任意節(jié)點(diǎn)的disabled狀態(tài)會(huì)沿路徑傳遞forceDisabled保證搜索結(jié)果中禁用路徑的葉子同樣不可選——這正是示例中Ningbo即使被搜索到也無法選中的原因。4.4 選中與退出搜索搜索模式下點(diǎn)擊命中項(xiàng)時(shí)組件判斷inSearchingMode后走搜索專用選中路徑cascader.component.tsonOptionClick(node, columnIndex, event) { ... this.inSearchingMode ? this.cascaderService.setSearchOptionSelected(node, this.nzMultiple) : this.cascaderService.setNodeActivated(node, columnIndex, !this.nzMultiple); }setSearchOptionSelectedcascader.service.ts在完成選中后通過$quitSearching通知組件清空輸入框、恢復(fù)下拉寬度樣式并觸發(fā)重繪——用戶看到的直觀效果是點(diǎn)選搜索結(jié)果后輸入框立即清空、級(jí)聯(lián)視圖還原。另外兩點(diǎn)與搜索強(qiáng)相關(guān)的實(shí)現(xiàn)細(xì)節(jié)空結(jié)果展示搜索無命中時(shí)下拉展示空態(tài)。setDropdownStylescascader.component.ts會(huì)依據(jù)搜索模式且無結(jié)果判斷shouldShowEmpty并將下拉寬度對(duì)齊輸入框?qū)挾葍?nèi)容由nzNotFoundContent或nzEmbedEmpty兜底。搜索模式下的高亮渲染選項(xiàng)時(shí)NzCascaderOptionComponent接收[highlightText]inSearchingMode ? inputValue : cascader.component.ts即僅在搜索模式下對(duì)命中關(guān)鍵字做高亮展示普通級(jí)聯(lián)瀏覽時(shí)不做高亮。鍵盤支持搜索模式下BACKSPACE、LEFT/RIGHT_ARROW保留輸入框原生編輯能力cascader.component.tsENTER選中當(dāng)前高亮結(jié)果UP/DOWN在結(jié)果間移動(dòng)保證純鍵盤可用。五、與其他選項(xiàng)的聯(lián)動(dòng)及注意事項(xiàng)場景結(jié)論多選模式nzMultiple與搜索可同時(shí)開啟搜索命中項(xiàng)會(huì)進(jìn)入多選標(biāo)簽列表選中后菜單保持展開源碼中$nodeSelected訂閱按!this.nzMultiple決定是否關(guān)閉菜單動(dòng)態(tài)加載nzLoadData與nzShowSearch不可同時(shí)使用組件文檔明確說明如需搜索大型遠(yuǎn)程數(shù)據(jù)可自行實(shí)現(xiàn)搜索接口 nzOptions重建自定義字段默認(rèn) filter 通過nzLabelProperty讀取 label自定義字段名后搜索依然按真實(shí) label 匹配表單狀態(tài)搜索框外觀與禁用nzDisabled、校驗(yàn)狀態(tài)nzStatus、形態(tài)變體nzVariant完全繼承 Cascader 主組件樣式體系選中回調(diào)無論普通選中還是搜索選中都會(huì)統(tǒng)一走ngModelChange/nzSelectionChange業(yè)務(wù)無需區(qū)分來源六、小結(jié)Cascader 的搜索功能是級(jí)聯(lián)瀏覽 扁平搜索兩種交互的融合nzShowSearch一行開啟內(nèi)置 filter 對(duì)路徑逐級(jí)匹配需要更精細(xì)的控制時(shí)NzShowSearchOptions的filter與sorter提供完全自定義的空間。底層實(shí)現(xiàn)上cascader.service.ts 通過列快照、路徑映射與$quitSearching事件保證了搜索態(tài)與級(jí)聯(lián)態(tài)的無縫切換且不破壞已選值與禁用規(guī)則。配合鍵盤導(dǎo)航、關(guān)鍵字高亮與空態(tài)兜底搜索模式讓深層級(jí)聯(lián)數(shù)據(jù)的選取體驗(yàn)大幅提升。贊分享UI組件前端【免費(fèi)下載鏈接】ng-zorro-antdAngular UI Component Library based on Ant Design項(xiàng)目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd點(diǎn)擊查看免費(fèi)下載相關(guān)推薦PPT Master SVG圖表模板指南33種圖表3步做出可編輯PPTPPT Master SVG圖表模板指南33種圖表3步做出可編輯PPT PPT Master是一個(gè)AI驅(qū)動(dòng)的演示文稿工具把文檔變成可編輯的PPT。它自帶3UI組件前端ng-zorro-antd Cascader 自定義校驗(yàn)狀態(tài)nzStatus實(shí)戰(zhàn)指南ng zorro antd Cascader 自定義校驗(yàn)狀態(tài)nzStatus實(shí)戰(zhàn)指南 nzStatus 是 ng zorro antd Cascader級(jí)UI組件前端ng-zorro-antd Cascader 響應(yīng)式表單實(shí)戰(zhàn)從表單綁定到 Reset 重置清空ng zorro antd Cascader 響應(yīng)式表單實(shí)戰(zhàn)從表單綁定到 Reset 重置清空 導(dǎo)讀 本文以 ng zorro antd 組件庫中 cascaUI組件前端上一篇gh_mirrors/exam/examples優(yōu)化技術(shù)模型層融合策略下一篇揭秘gh_mirrors/v41/v4GatsbyReactMarkdown靜態(tài)網(wǎng)站終極指南創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考