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

如您所见，不是最漂亮的，但至少我不需要修改任何将来都可以覆盖的东西。

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

Answer 2

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];
  }

该代码从未经过测试（：不确定它是否可以使用多个术语

NgbHighlight：逐行限制到一个突出显示

2 个答案: