NgbHighlight ：按行限制为一个高亮部分

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

NgbHighlight 做不到。您可以根据NgbHighlight source code轻松实现您需要的组件。这是一个微小的组件和一个小的变化。您只需要稍微更改正则表达式以仅在第一次出现术语时拆分

  ngOnChanges(changes: SimpleChanges) {
    const result = toString(this.result);

    const terms = Array.isArray(this.term) ? this.term : [this.term];
    const escapedTerms = terms.map(term => regExpEscape(toString(term)))
        .map(term => `${term}(.+)`)
        .filter(term => term);


    this.parts = escapedTerms.length ? result.split(new RegExp(`(${escapedTerms.join('|')})`, 'gmi')) : [result];
  }

代码从未经过测试（：不确定它是否适用于多个术语

Answer 2

为了避免触及 ngb-typeahead 的代码，我在 CSS 上做了一个 "fix"。不是最漂亮的解决方案，但至少它在视觉上有效。

这是 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;
}

如你所见，不是最漂亮的，但至少我不必修改任何可能在未来被覆盖的东西。

无论如何，谢谢大家的帮助！

NgbHighlight ：按行限制为一个高亮部分

NgbHighlight : Limit to one highlight part by line

javascript

ng-bootstrap

angular