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 และตรวจสอบผลลัพธ์ต่อไปนี้