以prime-ng自动完成功能突出显示搜索文本

Question

我正在使用带有角度7的PrimeNG AutoComplete。 在自动完成中，我返回所有列表 他们的项目 描述包含搜索文本。 我想在显示的列表的每个元素中突出显示匹配的单词。

     <p-autoComplete 
                    #autoComplete 
                     (onFocus)="autoComplete.handleDropdownClick()"
                    [suggestions]="results"
                    (completeMethod)="search($event)"
                    [multiple]="true"
                    field="Path"
                    (onSelect)="selectedValues($event)"
                    (onUnselect)="unSelectedValues($event)"
                    placeholder="Select Domain"
                    emptyMessage= {{noResult}}
                    [formControl]="dataModelControl"
                    >
              <ng-template let-value pTemplate="item">
               <div class="ui-helper-clearfix">
               <span [innerHTML]="value.Path | highlight : 
               toHighlight"></span
               </div>  
               </ng-template>
           </p-autoComplete>  

这是highlight管道的定义：

@Pipe({ name: 'highlight ' })
export class HighlightPipe implements PipeTransform {
    transform(text: string, search): string {  
          const pattern = search
          .replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&")
          .split(' ')
            .filter(t => t.length > 0)
           .join('|');
           const regex = new RegExp(pattern, 'gi');

            return search ? text.replace(regex, match => `<b>${match}</b>`) : 
                 text;
              }
             }
            }  
            //in ts file
            search(event) {

      if (event.query) {
        this.toHighlight = event.query;
         this.results = this.data.filter(option => {
          return option.Path.toLowerCase().indexOf(event.query.toLowerCase()) 
         >= 0
         });
          } else {
             this.results = this.data.slice();
            }
           }