如何突出显示输入的文字？

Question

我正在使用ng-bootstrap - ＆gt;预输入。

如果我们使用对象数组，则输入的值不会在下拉列表中突出显示。

请参阅此链接中的Template for results示例 https://ng-bootstrap.github.io/#/components/typeahead/examples

我需要突出显示输入的文字。我怎样才能实现它？

Answer 1

在typeahead-template.html中，而不是使用以下模板：

<ng-template #rt let-r="result" let-t="term">
  <img [src]="'https://upload.wikimedia.org/wikipedia/commons/thumb/' + r['flag']" width="16">
  {{ r.name}}
</ng-template>

您可以使用此模板：

<ng-template #rt let-r="result" let-t="term">
  <img [src]="'https://upload.wikimedia.org/wikipedia/commons/thumb/' + r['flag']" width="16">
  <ngb-highlight [result]="r.name" [term]="model"></ngb-highlight>
</ng-template>

这使用ng-bootstrap公开的ngb-highlight指令，以突出显示预先输出结果中搜索词的出现次数。

请参阅this Plunker了解有效的演示。