Ngx-Bootstrap - Typeahead

La direttiva ngx-bootstrap Typeahead fornisce un componente Typeahead facile da usare, altamente configurabile e facile da usare.

TypeaheadDirective

selettore

[typeahead]

Ingressi

adaptivePosition - booleano, i set usano la posizione adattiva.
container - string, un selettore che specifica l'elemento a cui aggiungere il typeahead.
dropup - booleano, questo attributo indica che il menu a discesa deve essere aperto verso l'alto, impostazione predefinita: false.
isAnimated - booleano, attiva / disattiva l'animazione, predefinito: false.
optionsListTemplate- TemplateRef <TypeaheadOptionListContext>, utilizzato per specificare un modello di elenco di opzioni personalizzato. Variabili del modello: corrispondenze, itemTemplate, query.
typeahead - Typeahead, sorgente delle opzioni, può essere Array of strings, objects o un Observable for external matching process.
typeaheadAsync- booleano, dovrebbe essere usato solo nel caso in cui l'attributo typeahead sia Observable of array. Se true - il caricamento delle opzioni sarà asincrono, altrimenti - sync. true ha senso se l'array di opzioni è grande.
typeaheadGroupField - stringa, quando la sorgente delle opzioni è un array di oggetti, il nome del campo che contiene il valore del gruppo, le corrispondenze sono raggruppate da questo campo quando impostate.
typeaheadHideResultsOnBlur - booleano, utilizzato per nascondere il risultato sulla sfocatura.
typeaheadIsFirstItemActive- booleano, rende attivo il primo elemento in una lista. Predefinito: vero.
typeaheadItemTemplate- TemplateRef <TypeaheadOptionItemContext>, utilizzato per specificare un modello di elemento personalizzato. Le variabili del modello esposte sono chiamate elemento e indice.
typeaheadLatinize- booleano, abbina i simboli latini. Se vero, la parola súper corrisponderebbe a super e viceversa. Predefinito: vero.
typeaheadMinLength- numero, numero minimo di caratteri che devono essere inseriti prima dell'inizio del testo. Quando è impostato su 0, typeahead viene visualizzato in primo piano con l'elenco completo delle opzioni (limitato normalmente da typeaheadOptionsLimit)
typeaheadMultipleSearch- booleano, può essere utilizzato per eseguire una ricerca di più elementi e avere suggerimenti non per l'intero valore dell'input ma per il valore che viene dopo un delimitatore fornito tramite l'attributo typeaheadMultipleSearchDelimiters. Questa opzione può essere utilizzata solo insieme all'opzione typeaheadSingleWords se typeaheadWordDelimiters e typeaheadPhraseDelimiters sono diversi da typeaheadMultipleSearchDelimiters per evitare conflitti nel determinare quando delimitare più ricerche e quando una singola parola.
typeaheadMultipleSearchDelimiters- stringa, deve essere utilizzato solo nel caso in cui l'attributo typeaheadMultipleSearch sia vero. Imposta il delimitatore di ricerca multipla per sapere quando iniziare una nuova ricerca. Il valore predefinito è virgola. Se è necessario utilizzare lo spazio, impostare in modo esplicito typeaheadWordDelimiters su qualcosa di diverso dallo spazio perché lo spazio viene utilizzato per impostazione predefinita OPPURE impostare l'attributo typeaheadSingleWords su false se non è necessario utilizzarlo insieme alla ricerca multipla.
typeaheadOptionField- stringa, quando la sorgente delle opzioni è un array di oggetti, il nome del campo che contiene il valore delle opzioni, usiamo l'elemento dell'array come opzione nel caso in cui questo campo sia mancante. Supporta proprietà e metodi annidati.
typeaheadOptionsInScrollableView - numero, valore predefinito: 5, specifica il numero di opzioni da mostrare nella visualizzazione a scorrimento
typeaheadOptionsLimit- numero, lunghezza massima dell'elenco degli elementi delle opzioni. Il valore predefinito è 20.
typeaheadOrderBy- TypeaheadOrder, utilizzato per specificare un ordine personalizzato delle corrispondenze. Quando la sorgente delle opzioni è un array di oggetti, è necessario impostare un campo per l'ordinamento. Nel caso in cui la sorgente delle opzioni sia un array di stringhe, un campo per l'ordinamento è assente. La direzione dell'ordine potrebbe essere modificata in ascendente o discendente.
typeaheadPhraseDelimiters- stringa, deve essere utilizzato solo nel caso in cui l'attributo typeaheadSingleWords sia vero. Imposta il delimitatore di parola in modo che corrisponda alla frase esatta. Il valore predefinito è virgolette semplici e doppie.
typeaheadScrollable - booleano, valore predefinito: false, specifica se typeahead è scorrevole
typeaheadSelectFirstItem - booleano, Valore predefinito: true, attivato quando un elenco di opzioni è stato aperto e l'utente ha fatto clic su Tab Se un valore è uguale a true, verrà scelto per primo o l'elemento attivo nell'elenco Se il valore è uguale a false, verrà scelto un elemento attivo in l'elenco o niente
typeaheadSingleWords - booleano, Valore predefinito: true, Può essere utilizzato per cercare parole inserendo un singolo spazio bianco tra ogni carattere, ad esempio "C alifornia" corrisponderà a "California".
typeaheadWaitMs - numero, tempo di attesa minimo dopo l'ultimo carattere digitato prima dell'inizio della digitazione
typeaheadWordDelimiters- stringa, deve essere utilizzato solo nel caso in cui l'attributo typeaheadSingleWords sia vero. Imposta il delimitatore di parola per interrompere le parole. Il valore predefinito è spazio.

Uscite

typeaheadLoading - attivato quando lo stato "occupato" di questo componente è stato modificato, attivato solo in modalità asincrona, restituisce un valore booleano.
typeaheadNoResults - attivato su ogni evento chiave e restituisce true in caso di corrispondenze non rilevate.
typeaheadOnBlur- attivato quando si verifica un evento di sfocatura. restituisce l'elemento attivo.
typeaheadOnSelect - attivato quando l'opzione è stata selezionata, restituisce l'oggetto con i dati di questa opzione.

Esempio

Dato che useremo un Typeahead, dobbiamo aggiornare app.module.ts usato nel capitolo ngx-bootstrap Timepicker da usareTypeaheadModule.

Aggiorna app.module.ts per utilizzare 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 { }

Aggiorna test.component.html per utilizzare il componente 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>

Aggiorna test.component.ts per le variabili e i metodi corrispondenti.

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

Costruisci e servi

Eseguire il seguente comando per avviare il server angolare.

ng serve

Una volta che il server è attivo e funzionante. Apri http: // localhost: 4200. Fare clic sul pulsante Apri modale e verificare il seguente output.

↰ Previous page