如何在由标题分隔的 bootstrap 下拉列表中获得 2 个不同的结果？

Question

我试图在一个自动完成结果中显示不同的结果，以区分标题。我有 2 个角色 Subject 和 Teacher，当用一些字母搜索时我想显示 Teacher 和 Subject 的结果，但想要区分如下

预期输出

expected output

教师标题会区分2个结果集

我得到的输出

Subject
Math
...

Maddy
....

代码的link是here

非常感谢任何帮助。

提前致谢！！

Answer 1

稍微更新的逻辑：

打字稿：

export class AppComponent {
  typeahead: FormControl = new FormControl();
  countries = countries;

  suggestions = {
    countries: [],
    teachers: [],
  };

  suggest() {
    this.suggestions = {
      countries: this.countries
        .filter(c => c.role === 'Subject')
        .filter(c => c.name.startsWith(this.typeahead.value))
        .slice(0, 5),
      teachers: this.countries
        .filter(c => c.role === 'Teacher')
        .filter(c => c.name.startsWith(this.typeahead.value))
        .slice(0, 5),
    };
  }
}

HTML:

<input type="text" [formControl]="typeahead" placeholder="Type ahead !" (input)="suggest()">
<div class="suggestions">
  <ng-container *ngFor="let s of suggestions.countries; let i = index">
    <h3 *ngIf="i === 0">{{ s.role }}</h3>
    <p>{{ s.role }} - {{ s.name }}</p>
  </ng-container>

  <ng-container *ngFor="let s of suggestions.teachers; let i = index">
    <h3 *ngIf="i === 0">{{ s.role }}</h3>
    <p>{{ s.role }} - {{ s.name }}</p>
  </ng-container>
</div>

您的示例不起作用，因为在 html 中仅检查第一个元素（在决定何时放置 h3 标签时）并且它具有角色 Teacher。拆分为 2 个字段将使您能够单独迭代每个字段并应用逻辑（在这种情况下，检查是否 i === 0）。

如何在由标题分隔的 bootstrap 下拉列表中获得 2 个不同的结果？

How to have 2 different results in a bootstrap dropdown separated by a heading?

html

css

angular

typescript

autocomplete