Angular Bootstrap 的 Typeahead 自定义功能

Question

我需要使用自定义搜索功能来获取结果项列表。

文档说：

<div class="mb-3 row">
    <label for="typeahead-config" class="col-xs-3 col-sm-auto col-form-label">Search for a state:</label>
    <div class="col">
        <input id="typeahead-config" type="text" class="form-control" [(ngModel)]="model" [ngbTypeahead]="search" />
    </div>
</div>

search = (text$: Observable<string>) =>
text$.pipe(
  debounceTime(200),
  distinctUntilChanged(),
  map(term => term.length < 2 ? []
    : states.filter(v => v.toLowerCase().startsWith(term.toLocaleLowerCase())).splice(0, 10))
)

那么，当用户输入内容时，我如何使用我的自定义函数？谢谢！

Answer 1

您的“搜索”将在 map 运算符中完成。示例中的过滤是“搜索”。它过滤提供的可用选项作为 term 和 returns 数组或可能显示在下拉列表中的选项

search = (text$: Observable<string>) =>
text$.pipe(
  debounceTime(200),
  distinctUntilChanged(),
  map(term => yourCustomSearchFunctionGoesInHereWhichReturnsAnArray(term)
)

if yourCustomSearchFunctionGoesInHere returns Observable，只需使用 swtichMap 而不是 map

Angular Bootstrap 的 Typeahead 自定义功能

Angular Bootstrap's Typeahead CUSTOM Function

ng-bootstrap

angular