Angular ngx Bootstrap Typeahead 组件

Angular ngx Bootstrap Typeahead 组件是一个基于Angular框架和Bootstrap样式库的自动完成输入框组件。用户可以在输入框中输入关键词，然后组件会自动展示与输入关键词匹配的选项列表。用户可以通过键盘或鼠标选择相应选项，从而完成输入。

特点

• 高度可定制性：用户可以根据需求选择不同的模板、样式和事件
• 支持远程数据源：用户可以通过服务端或API获取数据，组件会自动处理数据和展示
• 支持多种匹配模式：包括模糊匹配、前缀匹配、后缀匹配、精准匹配等
• 支持键盘和鼠标操作：用户可以使用上下键、回车键、鼠标点击等方式选择选项

使用

在使用组件前，需要先安装ngx-bootstrap和Bootstrap样式库：

npm install ngx-bootstrap bootstrap

然后，在app.module.ts中添加：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        TypeaheadModule.forRoot(),
        HttpClientModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

在HTML中，使用以下代码：

<input [(ngModel)]="selected" [typeahead]="suggestions" (typeaheadOnSelect)="onSelect($event)"/>

其中suggestions是选项列表，可以是一个静态数组或一个Observable对象（如果是远程数据源则需要用到Observable）。

在组件类中，需要定义selected和suggestions：

export class AppComponent {
  selected: string;
  suggestions: string[] = ['Alabama', 'Alaska', 'Arizona', 'Arkansas'];
  onSelect(event: TypeaheadMatch): void {
    console.log(event.item);
  }
}

组件选项

• [typeahead]：选项列表，可以是一个静态数组或一个Observable对象
• [typeaheadMinLength]：最小匹配长度，默认为1
• [typeaheadWaitMs]：等待时间（毫秒）后开始匹配，默认为300
• [typeaheadOptionsLimit]：最大展示选项数，默认为20
• [typeaheadOptionField]：选项字段名称，用于展示选项，默认为null，即使用选项本身（如果选项是基础数据类型则无效）
• [typeaheadAsync]：是否使用异步查询，默认为false
• [typeaheadLoading]：是否显示加载动画，默认为false
• [typeaheadNoResults]：没有匹配结果时的提示信息，默认为"No Results Found"
• [typeaheadSelectOnBlur]：是否在失焦时自动选中匹配项，默认为false
• (typeaheadOnBlur)：失焦事件
• (typeaheadOnSelect)：选中事件

总结

Angular ngx Bootstrap Typeahead 组件是一个十分有用且灵活的自动完成输入框组件，可以帮助用户快速输入关键词并自动匹配选项。同时，用户可以根据需求选择不同的模板、样式和事件，并支持多种匹配模式和键盘、鼠标操作。如果你需要一个自动完成输入框组件的话，Angular ngx Bootstrap Typeahead 组件会是一个不错的选择。