javascript - NgbHighlight : Limit to one highlight part by line

Question

我正在使用 NgbHighlight 让用户查看列表。

我的问题是结果的突出显示。我只想突出显示第一个匹配项。

我使用这里描述的非常基础的东西:https://ng-bootstrap.github.io/#/components/typeahead/examples

代码:https://ng-bootstrap.github.io/stackblitzes/typeahead/http/stackblitz.html

列表:['ABCD AAAA ABCD', 'BBBB ABCD BBBB', 'CCCC CCCC CCCC'];

搜索:'ABCD'

我想要的输出:

'**ABCD** AAAA ABCD'
'BBBB **ABCD** BBBB'

我得到的输出:

'**ABCD** AAAA **ABCD**'
'BBBB **ABCD** BBBB'

我应该怎么做才能将突出显示限制在第一部分？

例子:

HTML

<div class="form-group">
  <label for="typeahead-http">Search for a wiki page:</label>
  <input id="typeahead-http" type="text" class="form-control" [class.is-invalid]="searchFailed" [(ngModel)]="model" [ngbTypeahead]="search" placeholder="Wikipedia search" />
  <span *ngIf="searching">searching...</span>
  <div class="invalid-feedback" *ngIf="searchFailed">Sorry, suggestions could not be loaded.</div>
</div>

typescript

import {Component, Injectable} from '@angular/core';
import {HttpClient, HttpParams} from '@angular/common/http';
import {Observable, of} from 'rxjs';
import {catchError, debounceTime, distinctUntilChanged, map, tap, switchMap} from 'rxjs/operators';

const WIKI_URL = 'https://en.wikipedia.org/w/api.php';
const PARAMS = new HttpParams({
  fromObject: {
    action: 'opensearch',
    format: 'json',
    origin: '*'
  }
});

@Injectable()
export class WikipediaService {
  constructor(private http: HttpClient) {}

  search(term: string) {
    if (term === '') {
      return of([]);
    }

    return this.http
      .get(WIKI_URL, {params: PARAMS.set('search', term)}).pipe(
        map(response => response[1])
      );
  }
}

@Component({
  selector: 'ngbd-typeahead-http',
  templateUrl: './typeahead-http.html',
  providers: [WikipediaService],
  styles: [`.form-control { width: 300px; display: inline; }`]
})
export class NgbdTypeaheadHttp {
  model: any;
  searching = false;
  searchFailed = false;

  constructor(private _service: WikipediaService) {}

  search = (text$: Observable<string>) =>
    text$.pipe(
      debounceTime(300),
      distinctUntilChanged(),
      tap(() => this.searching = true),
      switchMap(term =>
        this._service.search(term).pipe(
          tap(() => this.searchFailed = false),
          catchError(() => {
            this.searchFailed = true;
            return of([]);
          }))
      ),
      tap(() => this.searching = false)
    )
}

Answer 1

为了避免触及 ngb-typeahead 的代码，我对我的 CSS 进行了“修复”。不是最漂亮的解决方案，但至少它在视觉上有效。

这是 ngb-typeahead 生成的 HTML(未修改，我只是删除了注释)。搜索词:'ABCD'

<ngb-highlight ng-reflect-result="'ABCD AAAA ABCD" ng-reflect-term="act">
    <span class="ngb-highlight">ABCD</span>
    &nbsp;AAAA&nbsp;
    <span class="ngb-highlight">ABCD</span>
</ngb-highlight>

所以我的解决方案:

.ngb-highlight {
  font-weight: normal !important;
}

ngb-highlight .ngb-highlight:first-child {
  font-weight: bold !important;
}

如您所见，这不是最漂亮的，但至少我不必修改任何可能在未来覆盖的内容。

无论如何，感谢大家的帮助!