Ngx-Bootstrap - Typeahead

La directiva ngx-bootstrap Typeahead proporciona un componente Typeahead fácil de usar, altamente configurable y fácil de usar.

TypeaheadDirective

selector

[typeahead]

Entradas

adaptivePosition - booleano, los conjuntos utilizan la posición adaptativa.
container - cadena, selector que especifica el elemento al que se debe agregar el encabezado.
dropup - booleano, este atributo indica que el menú desplegable debe abrirse hacia arriba, por defecto: falso.
isAnimated - booleano, activar / desactivar la animación, predeterminado: falso.
optionsListTemplate- TemplateRef <TypeaheadOptionListContext>, utilizado para especificar una plantilla de lista de opciones personalizada. Variables de plantilla: coincidencias, itemTemplate, consulta.
typeahead - Typeahead, fuente de opciones, puede ser una matriz de cadenas, objetos o un Observable para un proceso de coincidencia externo.
typeaheadAsync- booleano, debe usarse solo en caso de que el atributo typeahead sea Observable of array. Si es verdadero, la carga de opciones será asíncrona; de lo contrario, sincronizará. verdadero tiene sentido si la matriz de opciones es grande.
typeaheadGroupField - cadena, cuando la fuente de opciones es una matriz de objetos, el nombre del campo que contiene el valor del grupo, las coincidencias se agrupan por este campo cuando se establecen.
typeaheadHideResultsOnBlur - booleano, utilizado para ocultar el resultado de desenfoque.
typeaheadIsFirstItemActive- booleano, activa el primer elemento de una lista. Predeterminado: verdadero.
typeaheadItemTemplate- TemplateRef <TypeaheadOptionItemContext>, utilizado para especificar una plantilla de elemento personalizada. Las variables de plantilla expuestas se denominan elemento e índice.
typeaheadLatinize- booleano, coincide con los símbolos latinos. Si es verdadero, la palabra súper coincidiría con super y viceversa. Por defecto: verdadero.
typeaheadMinLength- número, número mínimo de caracteres que se deben ingresar antes de que comience la escritura anticipada. Cuando se establece en 0, typeahead se muestra en el foco con una lista completa de opciones (limitado normalmente por typeaheadOptionsLimit)
typeaheadMultipleSearch- booleano, se puede usar para realizar una búsqueda de varios elementos y tener sugerencias no para el valor completo de la entrada, sino para el valor que viene después de un delimitador proporcionado a través del atributo typeaheadMultipleSearchDelimiters. Esta opción solo se puede utilizar junto con la opción typeaheadSingleWords si typeaheadWordDelimiters y typeaheadPhraseDelimiters son diferentes de typeaheadMultipleSearchDelimiters para evitar conflictos al determinar cuándo delimitar varias búsquedas y cuándo una sola palabra.
typeaheadMultipleSearchDelimiters- cadena, debe usarse solo en caso de que el atributo typeaheadMultipleSearch sea verdadero. Establece el delimitador de búsqueda múltiple para saber cuándo iniciar una nueva búsqueda. El valor predeterminado es coma. Si es necesario usar espacio, establezca explícitamente typeaheadWordDelimiters en algo más que espacio porque el espacio se usa de forma predeterminada O establezca el atributo typeaheadSingleWords en falso si no necesita usarlo junto con búsquedas múltiples.
typeaheadOptionField- cadena, cuando la fuente de opciones es una matriz de objetos, el nombre del campo que contiene el valor de las opciones, usamos el elemento de la matriz como opción en caso de que falte este campo. Admite propiedades y métodos anidados.
typeaheadOptionsInScrollableView - número, valor predeterminado: 5, especifica el número de opciones que se mostrarán en la vista de desplazamiento
typeaheadOptionsLimit- número, longitud máxima de la lista de elementos de opciones. El valor predeterminado es 20.
typeaheadOrderBy- TypeaheadOrder: se utiliza para especificar un orden personalizado de coincidencias. Cuando la fuente de opciones es una matriz de objetos, se debe configurar un campo para ordenar. En el caso de que la fuente de opciones sea una matriz de cadena, falta un campo para ordenar. La dirección de pedido se puede cambiar a ascendente o descendente.
typeaheadPhraseDelimiters- cadena, debe usarse solo en caso de que el atributo typeaheadSingleWords sea verdadero. Establece el delimitador de palabras para que coincida con la frase exacta. El valor predeterminado es comillas simples y dobles.
typeaheadScrollable - booleano, valor predeterminado: falso, especifica si la escritura anticipada es desplazable
typeaheadSelectFirstItem - booleano, valor predeterminado: verdadero, se activa cuando se abre una lista de opciones y el usuario hace clic en Tab. Si un valor es igual a verdadero, se elegirá primero o el elemento activo en la lista. Si el valor es falso, se elegirá un elemento activo en la lista o nada
typeaheadSingleWords - booleano, valor predeterminado: verdadero, se puede utilizar para buscar palabras insertando un solo espacio en blanco entre cada carácter, por ejemplo, 'C alifornia' coincidirá con 'California'.
typeaheadWaitMs - número, tiempo de espera mínimo después del último carácter escrito antes de que comience la escritura anticipada
typeaheadWordDelimiters- cadena, debe usarse solo en caso de que el atributo typeaheadSingleWords sea verdadero. Establece el delimitador de palabras para dividir palabras. Por defecto es el espacio.

Salidas

typeaheadLoading - disparado cuando se cambió el estado 'ocupado' de este componente, disparado solo en modo asíncrono, devuelve booleano.
typeaheadNoResults - disparado en cada evento clave y devuelve verdadero en caso de que no se detecten coincidencias.
typeaheadOnBlur- disparado cuando ocurre un evento de desenfoque. devuelve el artículo activo.
typeaheadOnSelect - disparado cuando se seleccionó la opción, devuelve el objeto con los datos de esta opción.

Ejemplo

Como vamos a usar Typeahead, tenemos que actualizar app.module.ts usado en el capítulo ngx-bootstrap Timepicker para usarTypeaheadModule.

Actualice app.module.ts para usar 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 { }

Actualice test.component.html para usar el 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>

Actualice test.component.ts para las variables y métodos correspondientes.

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

Construir y servir

Ejecute el siguiente comando para iniciar el servidor angular.

ng serve

Una vez que el servidor está en funcionamiento. Abra http: // localhost: 4200. Haga clic en el botón Abrir modal y verifique el siguiente resultado.

↰ Previous page