Ngx-Bootstrap - Ketik

ngx-bootstrap Typeahead direktif menyediakan komponen Typeahead yang mudah digunakan dan sangat dapat dikonfigurasi dan digunakan.

TypeaheadDirective

pemilih

[typeahead]

Masukan

adaptivePosition - boolean, set menggunakan posisi adaptif.
container - string, Selektor yang menentukan elemen yang harus ditambahkan ke kepala jenis.
dropup - boolean, Atribut ini menunjukkan bahwa dropdown harus dibuka ke atas, default: false.
isAnimated - boolean, hidupkan / matikan animasi, default: false.
optionsListTemplate- TemplateRef <TypeaheadOptionListContext>, digunakan untuk menentukan template daftar opsi kustom. Variabel template: cocok, itemTemplate, query.
typeahead - Kepala Ketik, sumber opsi, dapat berupa Array string, objek, atau Observable untuk proses pencocokan eksternal.
typeaheadAsync- boolean, sebaiknya digunakan hanya jika atribut typeahead adalah larik yang dapat diamati. Jika benar - pemuatan opsi akan asinkron, jika tidak - sinkronkan. benar masuk akal jika array opsi besar.
typeaheadGroupField - string, jika sumber opsi adalah larik objek, nama bidang yang berisi nilai grup, cocok dikelompokkan berdasarkan bidang ini saat disetel.
typeaheadHideResultsOnBlur - boolean, digunakan untuk menyembunyikan hasil buram.
typeaheadIsFirstItemActive- boolean, mengaktifkan item pertama dalam daftar. Default: benar.
typeaheadItemTemplate- TemplateRef <TypeaheadOptionItemContext>, digunakan untuk menentukan template item kustom. Variabel template yang diekspos disebut item dan indeks.
typeaheadLatinize- boolean, cocokkan simbol latin. Jika benar kata súper akan cocok dengan super dan sebaliknya. Default: benar.
typeaheadMinLength- angka, minimal tidak ada karakter yang perlu dimasukkan sebelum kepala jenis dimulai. Saat disetel ke 0, typeahead ditampilkan dalam fokus dengan daftar lengkap opsi (dibatasi seperti biasa oleh typeaheadOptionsLimit)
typeaheadMultipleSearch- boolean, Dapat digunakan untuk melakukan pencarian beberapa item dan memiliki saran bukan untuk keseluruhan nilai input tetapi untuk nilai yang muncul setelah pembatas yang disediakan melalui atribut typeaheadMultipleSearchDelimiters. Opsi ini hanya dapat digunakan bersama dengan opsi typeaheadSingleWords jika typeaheadWordDelimiters dan typeaheadPhraseDelimiters berbeda dari typeaheadMultipleSearchDelimiters untuk menghindari konflik dalam menentukan kapan harus membatasi beberapa pencarian dan kapan satu kata.
typeaheadMultipleSearchDelimiters- string, sebaiknya digunakan hanya jika atribut typeaheadMultipleSearch benar. Menetapkan beberapa pembatas pencarian untuk mengetahui kapan harus memulai pencarian baru. Defaultnya adalah koma. Jika spasi perlu digunakan, setel typeaheadWordDelimiters ke sesuatu selain spasi karena spasi digunakan secara default ATAU setel atribut typeaheadSingleWords ke false jika Anda tidak perlu menggunakannya bersama dengan banyak pencarian.
typeaheadOptionField- string, jika sumber opsi adalah larik objek, nama bidang yang berisi nilai opsi, kami menggunakan item larik sebagai opsi jika bidang ini hilang. Mendukung properti dan metode bertingkat.
typeaheadOptionsInScrollableView - angka, Nilai default: 5, menentukan jumlah opsi untuk ditampilkan dalam tampilan gulir
typeaheadOptionsLimit- nomor, panjang maksimum daftar item opsi. Nilai defaultnya adalah 20.
typeaheadOrderBy- TypeaheadOrder, Digunakan untuk menentukan urutan pertandingan khusus. Ketika sumber opsi adalah larik objek, bidang untuk penyortiran harus disiapkan. Jika opsi, sumber adalah larik string, bidang untuk pengurutan tidak ada. Arah pemesanan bisa diubah menjadi ascending atau descending.
typeaheadPhraseDelimiters- string, sebaiknya digunakan hanya jika atribut typeaheadSingleWords benar. Menyetel pembatas kata agar sama persis dengan frasa. Default-nya adalah tanda kutip sederhana dan ganda.
typeaheadScrollable - boolean, Nilai default: false, menentukan apakah typeahead dapat di-scroll
typeaheadSelectFirstItem - boolean, Nilai default: benar, diaktifkan ketika daftar opsi dibuka dan pengguna mengklik Tab Jika nilai sama dengan benar, itu akan dipilih item pertama atau aktif dalam daftar Jika nilainya sama dengan salah, itu akan dipilih item aktif di daftar atau tidak sama sekali
typeaheadSingleWords - boolean, Nilai default: true, Dapat digunakan untuk mencari kata dengan memasukkan satu spasi di antara setiap karakter misalnya 'C alifornia' akan cocok dengan 'California'.
typeaheadWaitMs - angka, waktu tunggu minimal setelah karakter terakhir diketik sebelum kepala ketik dimulai
typeaheadWordDelimiters- string, sebaiknya digunakan hanya jika atribut typeaheadSingleWords benar. Mengatur pembatas kata untuk memisahkan kata. Default untuk spasi.

Keluaran

typeaheadLoading - diaktifkan ketika status 'sibuk' komponen ini diubah, diaktifkan hanya pada mode asinkron, mengembalikan boolean.
typeaheadNoResults - diaktifkan pada setiap peristiwa penting dan mengembalikan nilai true jika kecocokan tidak terdeteksi.
typeaheadOnBlur- Ditembak saat peristiwa blur terjadi. mengembalikan item aktif.
typeaheadOnSelect - diaktifkan saat opsi dipilih, kembalikan objek dengan data opsi ini.

Contoh

Karena kita akan menggunakan Typeahead, Kami telah memperbarui app.module.ts yang digunakan dalam bab Timepicker ngx-bootstrap untuk digunakan.TypeaheadModule.

Perbarui app.module.ts untuk menggunakan 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 { }

Perbarui test.component.html untuk menggunakan komponen timepicker.

test.component.html

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

Perbarui test.component.ts untuk variabel dan metode yang sesuai.

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

Bangun dan Sajikan

Jalankan perintah berikut untuk memulai server sudut.

ng serve

Setelah server aktif dan berjalan. Buka http: // localhost: 4200. Klik tombol Open modal dan verifikasi keluaran berikut.