Ngx-Bootstrap - 自動完成

ngx-bootstrap 自動完成指令提供了一個易於使用且高度可配置的、易於使用的自動完成元件。

自動完成指令

選擇器

[自動完成]

輸入

adaptivePosition − 布林值，設定使用自適應位置。
container − 字串，一個選擇器，指定應將自動完成附加到的元素。
dropup − 布林值，此屬性指示下拉選單應向上開啟，預設值：false。
isAnimated − 布林值，開啟/關閉動畫，預設值：false。
optionsListTemplate − TemplateRef<TypeaheadOptionListContext>，用於指定自定義選項列表模板。模板變數：matches、itemTemplate、query。
typeahead − 自動完成，選項來源，可以是字串陣列、物件陣列或用於外部匹配過程的可觀察物件。
typeaheadAsync − 布林值，僅在 typeahead 屬性為陣列的可觀察物件時使用。如果為 true，則選項的載入將是非同步的，否則為同步的。如果選項陣列很大，則 true 更有意義。
typeaheadGroupField − 字串，當選項來源為物件陣列時，包含組值的欄位名稱，設定後，匹配項將按此欄位分組。
typeaheadHideResultsOnBlur − 布林值，用於在失去焦點時隱藏結果。
typeaheadIsFirstItemActive − 布林值，使列表中的第一個專案處於活動狀態。預設值：true。
typeaheadItemTemplate − TemplateRef<TypeaheadOptionItemContext>，用於指定自定義專案模板。公開的模板變數稱為 item 和 index。
typeaheadLatinize − 布林值，匹配拉丁字元。如果為 true，則單詞 s�per 將匹配 super，反之亦然。預設值：true。
typeaheadMinLength − 數字，在自動完成啟動之前需要輸入的最小字元數。當設定為 0 時，自動完成在聚焦時顯示完整選項列表（受 typeaheadOptionsLimit 的正常限制）。
typeaheadMultipleSearch − 布林值，可用於對多個專案進行搜尋，並對輸入的完整值而不是分隔符之後的值進行建議（透過 typeaheadMultipleSearchDelimiters 屬性提供）。如果 typeaheadWordDelimiters 和 typeaheadPhraseDelimiters 與 typeaheadMultipleSearchDelimiters 不同，則此選項只能與 typeaheadSingleWords 選項一起使用，以避免在確定何時分隔多個搜尋和何時分隔單個單詞時發生衝突。
typeaheadMultipleSearchDelimiters − 字串，僅在 typeaheadMultipleSearch 屬性為 true 時使用。設定多個搜尋分隔符，以瞭解何時開始新的搜尋。預設為逗號。如果需要使用空格，則明確將 typeaheadWordDelimiters 設定為除空格之外的其他內容，因為預設情況下使用空格，或者如果不需要與多個搜尋一起使用，則將 typeaheadSingleWords 屬性設定為 false。
typeaheadOptionField − 字串，當選項來源為物件陣列時，包含選項值的欄位名稱，如果缺少此欄位，我們將使用陣列項作為選項。支援巢狀屬性和方法。
typeaheadOptionsInScrollableView − 數字，預設值：5，指定在滾動檢視中顯示的選項數。
typeaheadOptionsLimit − 數字，選項專案列表的最大長度。預設值為 20。
typeaheadOrderBy − TypeaheadOrder，用於指定匹配項的自定義順序。當選項來源為物件陣列時，必須設定一個用於排序的欄位。如果選項來源為字串陣列，則不存在用於排序的欄位。排序方向可以更改為升序或降序。
typeaheadPhraseDelimiters − 字串，僅在 typeaheadSingleWords 屬性為 true 時使用。設定單詞分隔符以匹配精確短語。預設為單引號和雙引號。
typeaheadScrollable − 布林值，預設值：false，指定自動完成是否可滾動。
typeaheadSelectFirstItem − 布林值，預設值：true，當選項列表開啟且使用者單擊 Tab 鍵時觸發。如果值為 true，則將選擇列表中的第一個或活動專案。如果值為 false，則將選擇列表中的活動專案或不選擇任何專案。
typeaheadSingleWords − 布林值，預設值：true，可用於透過在每個字元之間插入一個空格來搜尋單詞，例如“C a l i f o r n i a”將匹配“California”。
typeaheadWaitMs − 數字，在自動完成啟動之前，上次鍵入字元後的最小等待時間。
typeaheadWordDelimiters − 字串，僅在 typeaheadSingleWords 屬性為 true 時使用。設定單詞分隔符以分割單詞。預設為空格。

輸出

typeaheadLoading − 當此元件的“繁忙”狀態更改時觸發，僅在非同步模式下觸發，返回布林值。
typeaheadNoResults − 在每次按鍵事件觸發，如果未檢測到匹配項，則返回 true。
typeaheadOnBlur − 在發生失焦事件時觸發。返回活動專案。
typeaheadOnSelect − 在選擇選項時觸發，返回包含此選項資料的物件。

示例

由於我們將使用自動完成，因此我們必須更新 ngx-bootstrap 時間選擇器章節中使用的 app.module.ts 以使用自動完成模組。

更新 app.module.ts 以使用自動完成模組。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { AccordionModule } from 'ngx-bootstrap/accordion';
import { AlertModule,AlertConfig } from 'ngx-bootstrap/alert';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
import { FormsModule } from '@angular/forms';
import { CarouselModule } from 'ngx-bootstrap/carousel';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { BsDatepickerModule, BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
import { BsDropdownModule,BsDropdownConfig } from 'ngx-bootstrap/dropdown';
import { PaginationModule,PaginationConfig } from 'ngx-bootstrap/pagination';
import { PopoverModule, PopoverConfig } from 'ngx-bootstrap/popover';
import { ProgressbarModule,ProgressbarConfig } from 'ngx-bootstrap/progressbar';
import { RatingModule, RatingConfig } from 'ngx-bootstrap/rating';
import { SortableModule, DraggableItemService } from 'ngx-bootstrap/sortable';
import { TabsModule, TabsetConfig } from 'ngx-bootstrap/tabs';
import { TimepickerModule } from 'ngx-bootstrap/timepicker';
import { TypeaheadModule } from 'ngx-bootstrap/typeahead';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule,
      BsDatepickerModule.forRoot(),
      BsDropdownModule,
      ModalModule,
      PaginationModule,
      PopoverModule,
      ProgressbarModule,
      RatingModule,
      SortableModule,
      TabsModule,
      TimepickerModule.forRoot(),
      TypeaheadModule.forRoot()
   ],
   providers: [AlertConfig, 
      BsDatepickerConfig, 
      BsDropdownConfig,
      BsModalService,
      PaginationConfig,
      ProgressbarConfig,
      RatingConfig,
      DraggableItemService,
      TabsetConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

更新 test.component.html 以使用時間選擇器元件。

test.component.html

<input [(ngModel)]="selectedState"
   [typeahead]="states"
   class="form-control">
<pre class="card card-block card-header mb-3">Model: {{selectedState | json}}</pre>

更新 test.component.ts 以對應變數和方法。

test.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
   selectedState: string;
   states: string[] = ['Alabama','Alaska','Arizona','Arkansas','California','Colorado',
   'Connecticut','Delaware','Florida','Georgia','Hawaii','Idaho','Illinois',
   'Indiana','Iowa','Kansas','Kentucky','Louisiana','Maine',
   'Maryland','Massachusetts','Michigan','Minnesota','Mississippi',
   'Missouri','Montana','Nebraska','Nevada','New Hampshire','New Jersey',
   'New Mexico','New York','North Dakota','North Carolina','Ohio',
   'Oklahoma','Oregon','Pennsylvania','Rhode Island','South Carolina',
   'South Dakota','Tennessee','Texas','Utah','Vermont',
   'Virginia','Washington','West Virginia','Wisconsin','Wyoming'];
   constructor() {}
   ngOnInit(): void {
   } 
}

構建和啟動

執行以下命令以啟動 Angular 伺服器。

ng serve

伺服器啟動並執行後。開啟 https://:4200。單擊“開啟模態”按鈕並驗證以下輸出。

列印頁面