Как выделить введенный текст?

Question

Я использую ng-bootstrap -> typeahead.

Если мы используем массив объектов, введенное значение не будет выделено в выпадающем списке.

Пожалуйста, обратитесь Template for results пример по этой ссылке https://ng -bootstrap.github.io / # / компоненты / машинописный / примеры

Мне нужно выделить введенный текст. Как мне этого добиться?

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>

При этом используется директива ngb-highlight, предоставляемая ng-bootstrap, чтобы выделить вхождения поиска в результатах typeahead.

Пожалуйста, посмотрите этот Plunker для рабочего демо.