Adding support to display matched synonyms as a list like Sharepoint online does

Author: randellhodges

src/controls/modernTaxonomyPicker/ModernTaxonomyPicker.tsx

@@ -168,7 +168,11 @@ export function ModernTaxonomyPicker(props: IModernTaxonomyPickerProps): JSX.Ele
     return terms;
   }
 
+  let searchFilter: string = null;
+
   async function onResolveSuggestions(filter: string, selectedItems?: ITermInfo[]): Promise<ITermInfo[]> {
+
+    searchFilter = filter;
     if (filter === '') {
       return [];
     }
@@ -213,6 +217,7 @@ export function ModernTaxonomyPicker(props: IModernTaxonomyPickerProps): JSX.Ele
         term={term}
         termStoreInfo={currentTermStoreInfo}
         languageTag={currentLanguageTag}
+        searchFilter={searchFilter}
         {...itemProps}
       />
     );

src/controls/modernTaxonomyPicker/termItem/TermItemSuggestion.tsx

@@ -9,6 +9,7 @@ export interface ITermItemSuggestionProps<T> extends ISuggestionItemProps<T> {
   term: ITermInfo;
   languageTag?: string;
   termStoreInfo?: ITermStoreInfo;
+  searchFilter?: string;
   onLoadParentLabel?: (termId: Guid) => Promise<string>;
 }
 
@@ -27,28 +28,44 @@ export function TermItemSuggestion(props: ITermItemSuggestionProps<ITermInfo>):
     }
   }, []);
 
-  let labels: {
-                name: string;
-                isDefault: boolean;
-                languageTag: string;
-              }[];
+  const filterLabels = (isDefault: boolean, nameFilter?: (name: string) => boolean): {
+      name: string;
+      isDefault: boolean;
+      languageTag: string;
+    }[] => {
 
-  if (props.languageTag && props.termStoreInfo) {
-    labels = props.term.labels.filter((name) => name.languageTag === props.languageTag && name.isDefault);
-    if (labels.length === 0) {
-      labels = props.term.labels.filter((name) => name.languageTag === props.termStoreInfo.defaultLanguageTag && name.isDefault);
+    nameFilter = nameFilter || (() => true);
+
+    if (props.languageTag && props.termStoreInfo) {
+      let labels = props.term.labels.filter((name) => name.languageTag === props.languageTag && name.isDefault === isDefault && nameFilter(name.name));
+      if (labels.length === 0) {
+        labels = props.term.labels.filter((name) => name.languageTag === props.termStoreInfo.defaultLanguageTag && name.isDefault === isDefault && nameFilter(name.name));
+      }
+      return labels;
+    }
+    else {
+      return props.term.labels.filter((name) => name.isDefault === isDefault && nameFilter(name.name));
     }
   }
-  else {
-    labels = props.term.labels.filter((name) => name.isDefault);
-  }
+
+  const labels = filterLabels(true);
+  const synonyms = props.searchFilter ? filterLabels(false, (name) => {
+    const prefix = props.searchFilter!;
+    if (prefix.length > name.length)
+      return false;
+    const compareTo = name.substring(0, prefix.length);
+    return compareTo.localeCompare(prefix, undefined, { sensitivity: 'base' }) === 0;
+  }) : [];
 
   return (
     <div className={styles.termSuggestionContainer} title={labels[0]?.name}>
       {labels[0]?.name}
       {parentLabel !== "" && <div>
         <span className={styles.termSuggestionPath}>{`${strings.ModernTaxonomyPickerSuggestionInLabel} ${parentLabel}`}</span>
       </div>}
+      {synonyms.length > 0 && <ul className={styles.termSynonymList}>
+        {synonyms.map((synonym) => <li key={synonym.name}><span className={styles.synonymPrefix}>{synonym.name.substring(0, props.searchFilter!.length)}</span><span>{synonym.name.substring(props.searchFilter!.length)}</span></li>)}
+      </ul>}
     </div>
   );
 }

src/controls/modernTaxonomyPicker/termItem/TermItemSuggestions.module.scss

@@ -1,13 +1,25 @@
 @import '~@fluentui/react/dist/sass/References.scss';
 
-html[dir='ltr'] .termSuggestionContainer
+html[dir='ltr']
 {
-  text-align: left;
+  .termSuggestionContainer
+  {
+    text-align: left;
+  }
+  .termSynonymList {
+    padding-left: 0;
+  }
 }
 
-html[dir='rtl'] .termSuggestionContainer
+html[dir='rtl']
 {
-  text-align: right;
+  .termSuggestionContainer
+  {
+    text-align: right;
+  }
+  .termSynonymList {
+    padding-right: 0;
+  }
 }
 
 .termSuggestionContainer
@@ -17,10 +29,34 @@ html[dir='rtl'] .termSuggestionContainer
   padding-right: 12px;
   padding-bottom: 7px;
 
-  .termSuggestionPath
+  .termSuggestionPath,
+  .termSynonymList
   {
     font-size: 12px;
     color: #666666;
   }
 
+  .termSynonymList
+  {
+    color: #605e5c;
+    font-size: var(--ms-fonts-medium-fontSize, 14px);
+    list-style: none;
+    margin-block-start: 2px;
+    margin-top: 2px;
+    > li
+    {
+      &::before
+      {
+        content: '•';
+        font-size: 11px;
+        padding-left: 4px;
+      }
+
+      > span.synonymPrefix
+      {
+        font-weight: 600;
+      }
+    }
+  }
+
 }