以下是一个使用Angular 7、NgBootstrap和Typeahead搜索的示例代码:
首先,确保你已经安装了所需的依赖项。在终端中运行以下命令:
npm install @ng-bootstrap/ng-bootstrap
npm install ngx-bootstrap
在你的Angular组件中,导入所需的模块和服务:
import { Component } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
import { NgbTypeaheadSelectItemEvent } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-typeahead',
templateUrl: './typeahead.component.html',
styleUrls: ['./typeahead.component.css']
})
export class TypeaheadComponent {
search: string;
searchResults: string[];
searchSubject = new Subject();
constructor() {
this.searchSubject.pipe(
debounceTime(300),
distinctUntilChanged(),
map(term => term.length < 2 ? [] : this.searchResults.filter(result => result.toLowerCase().indexOf(term.toLowerCase()) > -1))
).subscribe(results => {
this.searchResults = results;
});
}
searchTypeahead = (text$: Observable) => {
const debouncedText$ = text$.pipe(debounceTime(200), distinctUntilChanged());
const clicksWithClosedPopup$ = this.click$.pipe(filter(() => !this.instance.isPopupOpen()));
const inputFocus$ = this.focus$;
return merge(debouncedText$, inputFocus$, clicksWithClosedPopup$).pipe(
map(term => {
if (term === '') {
return this.searchResults;
} else {
this.searchSubject.next(term);
}
})
);
}
selectTypeaheadItem(event: NgbTypeaheadSelectItemEvent) {
this.search = event.item;
}
}
在你的组件模板中,使用NgBootstrap的Typeahead指令:
这样,当你在输入框中输入时,它会根据输入的内容自动搜索匹配的结果,并在下拉列表中显示。当你选择一个结果时,它会将结果赋值给search属性。
请注意,上述代码中的searchResults变量应该是一个字符串数组,其中包含你要搜索的结果。你可以根据自己的需求从API获取这些结果。
希望这可以帮助到你!