Ngx-Bootstrap - Typeahead
ngx-bootstrap Typeahead directive ให้ส่วนประกอบ Typeahead ที่ใช้งานง่ายและกำหนดค่าได้สูงและใช้งานง่าย
TypeaheadDirective
ตัวเลือก
[typeahead]
อินพุต
adaptivePosition - บูลีนชุดใช้ตำแหน่งที่ปรับได้
container - สตริงตัวเลือกระบุองค์ประกอบที่ควรต่อท้าย typeahead
dropup - บูลีนแอตทริบิวต์นี้ระบุว่าควรเปิดดรอปดาวน์ขึ้นไปค่าเริ่มต้น: เท็จ
isAnimated - บูลีนเปิด / ปิดภาพเคลื่อนไหวค่าเริ่มต้น: เท็จ
optionsListTemplate- TemplateRef <TypeaheadOptionListContext> ใช้เพื่อระบุเทมเพลตรายการตัวเลือกแบบกำหนดเอง ตัวแปรเทมเพลต: การจับคู่ itemTemplate แบบสอบถาม
typeahead - Typeahead แหล่งที่มาของอ็อพชันสามารถเป็นอาร์เรย์ของสตริงอ็อบเจกต์หรือ Observable สำหรับกระบวนการจับคู่ภายนอก
typeaheadAsync- บูลีนควรใช้เฉพาะในกรณีที่แอตทริบิวต์ typeahead เป็นที่สังเกตได้ของอาร์เรย์ ถ้าเป็นจริง - การโหลดตัวเลือกจะเป็นแบบ async มิฉะนั้น - sync จริงสมเหตุสมผลถ้าอาร์เรย์ตัวเลือกมีขนาดใหญ่
typeaheadGroupField - สตริงเมื่ออ็อพชันซอร์สเป็นอาร์เรย์ของอ็อบเจ็กต์ชื่อของฟิลด์ที่มีค่ากลุ่มการจับคู่จะถูกจัดกลุ่มตามฟิลด์นี้เมื่อตั้งค่า
typeaheadHideResultsOnBlur - บูลีนใช้เพื่อซ่อนผลลัพธ์เมื่อเบลอ
typeaheadIsFirstItemActive- บูลีนทำให้รายการแรกที่ใช้งานอยู่ในรายการ ค่าเริ่มต้น: จริง
typeaheadItemTemplate- TemplateRef <TypeaheadOptionItemContext> ใช้เพื่อระบุเทมเพลตรายการที่กำหนดเอง ตัวแปรเทมเพลตที่เปิดเผยเรียกว่ารายการและดัชนี
typeaheadLatinize- บูลีนจับคู่สัญลักษณ์ละติน ถ้าเป็นจริงคำว่าsúperจะจับคู่ super และในทางกลับกันค่าเริ่มต้น: true
typeaheadMinLength- จำนวนไม่มีอักขระน้อยที่สุดที่ต้องป้อนก่อนพิมพ์เฮดเตะเข้า เมื่อตั้งค่าเป็น 0 typeahead จะแสดงโฟกัสพร้อมรายการตัวเลือกทั้งหมด (จำกัด ตามปกติโดย typeaheadOptionsLimit)
typeaheadMultipleSearch- บูลีนสามารถใช้ในการค้นหาหลายรายการและมีข้อเสนอแนะที่ไม่ใช่สำหรับค่าทั้งหมดของอินพุต แต่สำหรับค่าที่มาหลังจากตัวคั่นที่ระบุผ่านแอตทริบิวต์ typeaheadMultipleSearchDelimiters ตัวเลือกนี้สามารถใช้ร่วมกับตัวเลือก typeaheadSingle
typeaheadMultipleSearchDelimiters- สตริงควรใช้เฉพาะในกรณีที่แอตทริบิวต์ typeaheadMultipleSearch เป็นจริง ตั้งค่าตัวคั่นการค้นหาหลายรายการเพื่อให้ทราบว่าเมื่อใดควรเริ่มการค้นหาใหม่ ค่าเริ่มต้นเป็นลูกน้ำ หากจำเป็นต้องใช้พื้นที่ให้ตั้งค่า typeaheadWordDelimiters อย่างชัดเจนเป็นอย่างอื่นที่ไม่ใช่ช่องว่างเนื่องจากพื้นที่ถูกใช้โดยค่าเริ่มต้นหรือตั้งค่าแอตทริบิวต์ typeaheadSingleWords เป็นเท็จหากคุณไม่จำเป็นต้องใช้ร่วมกับการค้นหาหลายรายการ
typeaheadOptionField- สตริงเมื่ออ็อพชันซอร์สเป็นอาร์เรย์ของอ็อบเจ็กต์ชื่อของฟิลด์ที่มีค่าอ็อพชันเราจะใช้ไอเท็มอาร์เรย์เป็นอ็อพชันในกรณีที่ฟิลด์นี้หายไป รองรับคุณสมบัติและวิธีการที่ซ้อนกัน
typeaheadOptionsInScrollableView - ตัวเลขค่าเริ่มต้น: 5 ระบุจำนวนตัวเลือกที่จะแสดงในมุมมองแบบเลื่อน
typeaheadOptionsLimit- จำนวนความยาวสูงสุดของรายการตัวเลือก ค่าเริ่มต้นคือ 20
typeaheadOrderBy- TypeaheadOrder ใช้เพื่อระบุลำดับการแข่งขันที่กำหนดเอง เมื่ออ็อพชันซอร์สเป็นอาร์เรย์ของอ็อบเจ็กต์จำเป็นต้องตั้งค่าฟิลด์สำหรับการเรียงลำดับ ในกรณีที่ตัวเลือกซอร์สเป็นอาร์เรย์ของสตริงจะไม่มีฟิลด์สำหรับการเรียงลำดับ ทิศทางการสั่งซื้อสามารถเปลี่ยนเป็นจากน้อยไปมากหรือมากไปน้อยได้
typeaheadPhraseDelimiters- สตริงควรใช้เฉพาะในกรณีที่แอตทริบิวต์ typeaheadSingleWords เป็นจริง ตั้งค่าตัวคั่นคำให้ตรงกับวลีทั้งหมด ค่าเริ่มต้นคืออัญประกาศแบบง่ายและแบบคู่
typeaheadScrollable - บูลีนค่าดีฟอลต์: false ระบุว่า typeahead เลื่อนได้หรือไม่
typeaheadSelectFirstItem - บูลีน, ค่าดีฟอลต์: จริง, เริ่มทำงานเมื่อรายการตัวเลือกถูกเปิดขึ้นและผู้ใช้คลิกแท็บหากค่าเท่ากับจริงค่านั้นจะถูกเลือกเป็นรายการแรกหรือรายการที่ใช้งานอยู่ในรายการหากค่าเท่ากับเท็จระบบจะเลือกรายการที่ใช้งานอยู่ใน รายการหรือไม่มีเลย
typeaheadSingleWords - บูลีน, ค่าดีฟอลต์: จริง, สามารถใช้เพื่อค้นหาคำโดยการแทรกช่องว่างระหว่างอักขระแต่ละตัวเช่น 'C alifornia' จะตรงกับ 'California'
typeaheadWaitMs - จำนวนเวลารอน้อยที่สุดหลังจากพิมพ์อักขระตัวสุดท้ายก่อนพิมพ์เฮดเตะเข้า
typeaheadWordDelimiters- สตริงควรใช้เฉพาะในกรณีที่แอตทริบิวต์ typeaheadSingleWords เป็นจริง ตั้งค่าตัวคั่นคำเพื่อทำลายคำ ค่าเริ่มต้นคือช่องว่าง
เอาท์พุต
typeaheadLoading - เริ่มทำงานเมื่อสถานะ 'ไม่ว่าง' ของส่วนประกอบนี้ถูกเปลี่ยน, เริ่มทำงานในโหมด async เท่านั้น, ส่งคืนบูลีน
typeaheadNoResults - ยิงในทุกเหตุการณ์สำคัญและส่งคืนจริงในกรณีที่ตรวจไม่พบการแข่งขัน
typeaheadOnBlur- ยิงเมื่อเกิดเหตุการณ์เบลอ ส่งคืนรายการที่ใช้งานอยู่
typeaheadOnSelect - เริ่มทำงานเมื่อเลือกตัวเลือกส่งคืนวัตถุพร้อมข้อมูลของตัวเลือกนี้
ตัวอย่าง
ในขณะที่เรากำลังจะใช้ Typeahead เราต้องอัปเดต app.module.ts ที่ใช้ในตอน ngx-bootstrap Timepickerเพื่อใช้TypeaheadModule.
อัปเดต app.module.ts เพื่อใช้ 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 { }
อัปเดต test.component.html เพื่อใช้คอมโพเนนต์ 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>
อัปเดต 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 {
}
}
สร้างและให้บริการ
รันคำสั่งต่อไปนี้เพื่อเริ่มเซิร์ฟเวอร์เชิงมุม
ng serve
เมื่อเซิร์ฟเวอร์เริ่มทำงาน เปิด http: // localhost: 4200 คลิกที่ปุ่ม Open modal และตรวจสอบผลลัพธ์ต่อไปนี้