如何在由标题分隔的 bootstrap 下拉列表中获得 2 个不同的结果?
How to have 2 different results in a bootstrap dropdown separated by a heading?
我试图在一个自动完成结果中显示不同的结果,以区分标题。我有 2 个角色 Subject 和 Teacher,当用一些字母搜索时我想显示 Teacher 和 Subject 的结果,但想要区分如下
预期输出
expected output
教师标题会区分2个结果集
我得到的输出
Subject
Math
...
Maddy
....
代码的link是here
非常感谢任何帮助。
提前致谢!!
稍微更新的逻辑:
打字稿:
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
)。
我试图在一个自动完成结果中显示不同的结果,以区分标题。我有 2 个角色 Subject 和 Teacher,当用一些字母搜索时我想显示 Teacher 和 Subject 的结果,但想要区分如下
预期输出
expected output
教师标题会区分2个结果集
我得到的输出
Subject
Math
...
Maddy
....
代码的link是here
非常感谢任何帮助。
提前致谢!!
稍微更新的逻辑:
打字稿:
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
)。