Ngx-Bootstrap - Typeahead

ngx-bootstrap Typeahead chỉ thị cung cấp một thành phần Typeahead dễ sử dụng và có cấu hình cao, dễ sử dụng.

TypeaheadDirective

bộ chọn

[typeahead]

Đầu vào

adaptivePosition - boolean, các bộ sử dụng vị trí thích ứng.
container - string, Một bộ chọn chỉ định phần tử mà tiêu đề đánh máy sẽ được thêm vào.
dropup - boolean, Thuộc tính này chỉ ra rằng menu thả xuống phải được mở lên trên, mặc định: false.
isAnimated - boolean, bật / tắt hoạt ảnh, mặc định: false.
optionsListTemplate- TemplateRef <TypeaheadOptionListContext>, được sử dụng để chỉ định mẫu danh sách tùy chọn tùy chỉnh. Các biến mẫu: đối sánh, itemTemplate, truy vấn.
typeahead - Typeahead, nguồn tùy chọn, có thể là Mảng chuỗi, đối tượng hoặc một quy trình có thể quan sát được cho đối sánh bên ngoài.
typeaheadAsync- boolean, chỉ nên được sử dụng trong trường hợp thuộc tính typeahead là Observable của mảng. Nếu đúng - tải các tùy chọn sẽ không đồng bộ, nếu không - đồng bộ hóa. true có ý nghĩa nếu mảng tùy chọn lớn.
typeaheadGroupField - chuỗi, khi nguồn tùy chọn là một mảng đối tượng, tên của trường chứa giá trị nhóm, các kết quả phù hợp được nhóm theo trường này khi được đặt.
typeaheadHideResultsOnBlur - boolean, được sử dụng để ẩn kết quả khi làm mờ.
typeaheadIsFirstItemActive- boolean, làm cho mục đầu tiên hoạt động trong danh sách. Mặc định: true.
typeaheadItemTemplate- TemplateRef <TypeaheadOptionItemContext>, được sử dụng để chỉ định một mẫu mục tùy chỉnh. Các biến mẫu được hiển thị được gọi là mục và chỉ mục.
typeaheadLatinize- boolean, khớp các ký hiệu latin. Nếu đúng thì từ súper sẽ khớp với super và ngược lại.Default: true.
typeaheadMinLength- số, tối thiểu không có ký tự nào cần được nhập trước khi bắt đầu đánh máy. Khi được đặt thành 0, lỗi chính tả hiển thị trên tiêu điểm với danh sách đầy đủ các tùy chọn (bị giới hạn như bình thường bởi typeaheadOptionsLimit)
typeaheadMultipleSearch- boolean, Có thể được sử dụng để thực hiện tìm kiếm nhiều mục và có gợi ý không phải cho toàn bộ giá trị của đầu vào mà cho giá trị đứng sau dấu phân cách được cung cấp thông qua thuộc tính typeaheadMultipleSearchDelimiters. Tùy chọn này chỉ có thể được sử dụng cùng với tùy chọn typeaheadSingleWords nếu typeaheadWordDelimiters và typeaheadPhraseDelimiters khác với typeaheadMultipleSearchDelimiters để tránh xung đột trong việc xác định khi nào cần phân tách nhiều tìm kiếm và khi nào là một từ duy nhất.
typeaheadMultipleSearchDelimiters- string, chỉ nên được sử dụng trong trường hợp thuộc tính typeaheadMultipleSearch là true. Đặt dấu phân tách nhiều tìm kiếm để biết khi nào bắt đầu tìm kiếm mới. Mặc định là dấu phẩy. Nếu cần sử dụng khoảng trắng, thì hãy đặt rõ ràng typeaheadWordDelimiters thành một thứ khác ngoài khoảng trắng vì khoảng trắng được sử dụng theo mặc định HOẶC đặt thuộc tính typeaheadSingleWords thành false nếu bạn không cần sử dụng nó cùng với nhiều tìm kiếm.
typeaheadOptionField- string, khi nguồn tùy chọn là một mảng đối tượng, tên của trường chứa giá trị tùy chọn, chúng ta sử dụng mục mảng làm tùy chọn trong trường hợp thiếu trường này. Hỗ trợ các thuộc tính và phương thức lồng nhau.
typeaheadOptionsInScrollableView - số, Giá trị mặc định: 5, chỉ định số tùy chọn để hiển thị trong chế độ xem cuộn
typeaheadOptionsLimit- số lượng, độ dài tối đa của danh sách các mục tùy chọn. Giá trị mặc định là 20.
typeaheadOrderBy- TypeaheadOrder, Được sử dụng để chỉ định thứ tự tùy chỉnh của các kết quả phù hợp. Khi nguồn tùy chọn là một mảng các đối tượng, một trường để sắp xếp phải được thiết lập. Trong trường hợp nguồn tùy chọn là một mảng chuỗi, trường để sắp xếp sẽ không có. Hướng sắp xếp có thể được thay đổi thành tăng dần hoặc giảm dần.
typeaheadPhraseDelimiters- string, chỉ nên được sử dụng trong trường hợp thuộc tính typeaheadSingleWords là true. Đặt dấu phân cách từ để khớp với cụm từ chính xác. Mặc định là dấu ngoặc kép và đơn giản.
typeaheadScrollable - boolean, Giá trị mặc định: false, chỉ định nếu lỗi chính tả có thể cuộn được
typeaheadSelectFirstItem - boolean, Giá trị mặc định: true, được kích hoạt khi danh sách tùy chọn được mở và người dùng nhấp vào Tab Nếu giá trị bằng true, nó sẽ được chọn đầu tiên hoặc mục đang hoạt động trong danh sách Nếu giá trị bằng false, nó sẽ được chọn là mục đang hoạt động trong danh sách hoặc không có gì
typeaheadSingleWords - boolean, Giá trị mặc định: true, Có thể được sử dụng để tìm kiếm các từ bằng cách chèn một khoảng trắng duy nhất giữa mỗi ký tự, ví dụ 'C alifornia' sẽ khớp với 'California'.
typeaheadWaitMs - số, thời gian chờ tối thiểu sau khi ký tự cuối cùng được nhập trước khi bắt đầu đánh máy
typeaheadWordDelimiters- string, chỉ nên được sử dụng trong trường hợp thuộc tính typeaheadSingleWords là true. Đặt dấu phân cách từ để ngắt các từ. Mặc định là không gian.

Kết quả đầu ra

typeaheadLoading - được kích hoạt khi trạng thái 'bận' của thành phần này bị thay đổi, chỉ được kích hoạt ở chế độ không đồng bộ, trả về boolean.
typeaheadNoResults - được kích hoạt trên mọi sự kiện quan trọng và trả về true trong trường hợp không tìm thấy kết quả phù hợp.
typeaheadOnBlur- bắn khi xảy ra sự kiện mờ. trả lại mục đang hoạt động.
typeaheadOnSelect - kích hoạt khi tùy chọn được chọn, trả về đối tượng với dữ liệu của tùy chọn này.

Thí dụ

Vì chúng ta sẽ sử dụng Typeahead, nên chúng ta phải cập nhật app.module.ts được sử dụng trong chương Ngx-bootstrap Timepicker để sử dụngTypeaheadModule.

Cập nhật app.module.ts để sử dụng TypeaheadModule.

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 { }

Cập nhật test.component.html để sử dụng thành phần bộ chọn thời gian.

test.component.html

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

Cập nhật test.component.ts cho các biến và phương thức tương ứng.

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 {
   } 
}

Xây dựng và Phục vụ

Chạy lệnh sau để khởi động máy chủ góc.

ng serve

Sau khi máy chủ hoạt động. Mở http: // localhost: 4200. Nhấp vào nút Mở phương thức và xác minh kết quả sau.