Descripción general de la directiva de autocompletar Angular

    Angular Autocompletar es una directiva del cuadro de búsqueda que permite a los usuarios buscar, filtrar y seleccionar fácilmente un elemento de una lista de sugerencias mientras escriben. Rico en funciones, admite vinculación de datos, filtrado, agrupación, opciones de personalización de la interfaz de usuario y otras funcionalidades integradas para que los desarrolladores puedan crear una experiencia de búsqueda intuitiva de autocompletar.

    La directiva igxAutocomplete proporciona una forma de mejorar la entrada de texto mostrando un igxDropDown con opciones sugeridas, proporcionadas por el desarrollador. Las sugerencias se mostrarán una vez que comience a escribir el ingreso de texto o use las teclas Arrow Up o Arrow Down.

    Ejemplo de autocompletar Angular

    El siguiente ejemplo Angular Autocompletar genera una lista desplegable de sugerencias cuando los usuarios comienzan a escribir el nombre de una ciudad en el cuadro de texto de entrada.

    Primeros pasos con Ignite UI for Angular Autocompletar

    Para comenzar con Ignite UI for Angular para componentes Angular y la directiva Autocompletar en particular, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:

    ng add igniteui-angular

    Para obtener una introducción completa a la Ignite UI for Angular, lea el tema de introducción.

    El siguiente paso es importar IgxAutocompleteModule e IgxDropDownModule en nuestro app.module. Si se aplica igxAutocomplete en un igxInput, también se requiere igxInputGroupModule:

    // app.module.ts ... import { IgxAutocompleteModule, IgxDropDownModule, IgxInputGroupModule } from 'igniteui-angular'; // import { IgxAutocompleteModule, IgxDropDownModule, IgxInputGroupModule } from '@infragistics/igniteui-angular'; for licensed package @NgModule({ ... imports: [ ..., IgxAutocompleteModule, IgxDropDownModule, IgxInputGroupModule, .... ], ... }) export class AppModule {}

    Alternativamente, a partir de 16.0.0 puede importar IgxAutocompleteDirective como una directiva independiente.

    // home.component.ts ... import { IgxAutocompleteDirective, IGX_INPUT_GROUP_DIRECTIVES, IGX_DROP_DOWN_DIRECTIVES } from 'igniteui-angular'; // import { IgxAutocompleteDirective, IGX_INPUT_GROUP_DIRECTIVES, IGX_DROP_DOWN_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package @Component({ selector: 'app-home', template: ` <igx-input-group> <input igxInput name="towns" type="text" [igxAutocomplete]="townsPanel" /> <label igxLabel for="towns">Towns</label> </igx-input-group> <igx-drop-down #townsPanel> <igx-drop-down-item *ngFor="let town of towns"> {{town}} </igx-drop-down-item> </igx-drop-down> `, styleUrls: ['home.component.scss'], standalone: true, imports: [IgxAutocompleteDirective, IGX_INPUT_GROUP_DIRECTIVES, IGX_DROP_DOWN_DIRECTIVES] }) export class HomeComponent {}

    Ahora que ha importado la directiva o el módulo Ignite UI for Angular Action Strip, puede comenzar con una configuración básica del componente igxAutocomplete.

    Usando el autocompletar Angular

    Para aplicar la funcionalidad de autocompletar a una entrada, agregue la directiva igxAutocomplete, haciendo referencia al menú desplegable:

    <igx-input-group> <input igxInput name="towns" type="text" [igxAutocomplete]="townsPanel" /> <label igxLabel for="towns">Towns</label> </igx-input-group> <igx-drop-down #townsPanel> <igx-drop-down-item *ngFor="let town of towns"> {{town}} </igx-drop-down-item> </igx-drop-down>

    Agregue la lista que se mostrará en el menú desplegable. Si desea que la lista se filtre mientras escribe, utilice la interfaz PipeTransform.

    import { Component, Pipe, PipeTransform } from '@angular/core'; @Component({ selector: 'app-autocomplete-sample', styleUrls: ['autocomplete.sample.css'], templateUrl: `autocomplete.sample.html` }) export class AutocompleteSampleComponent { constructor() { this.towns = [ 'New York', 'Washington, D.C.', 'London', 'Berlin', 'Sofia', 'Rome', 'Kiev', 'Copenhagen', 'Paris', 'Barcelona', 'Vienna', 'Athens', 'Dublin', 'Yerevan', 'Oslo', 'Helsinki', 'Stockholm', 'Prague', 'Istanbul', 'El Paso', 'Florence', 'Moscow' ]; } } @Pipe({ name: 'startsWith' }) export class AutocompletePipeStartsWith implements PipeTransform { public transform(collection: any[], term = '') { return collection.filter((item) => item.toString().toLowerCase().startsWith(term.toString().toLowerCase())); } }
    Nota

    ​igxAutocomplete utiliza igxDropDown como proveedor de las opciones disponibles, lo que significa que todas las capacidades del componente desplegable se pueden usar en el autocompletado.

    Deshabilitar el autocompletado Angular

    Puede desactivar el autocompletado Angular utilizando la entrada IgxAutocompleteDisabled:

    <igx-input-group> <input igxInput name="towns" type="text" [igxAutocomplete]='townsPanel' [igxAutocompleteDisabled]="disabled"/> <label igxLabel for="towns">Towns</label> </igx-input-group>

    Configuración de autocompletar

    El posicionamiento del menú desplegable, la estrategia de desplazamiento y la salida igx-autocomplete se pueden configurar usando IgxAutocompleteSettings.

    En el siguiente ejemplo Angular Autocompletar, colocaremos el menú desplegable encima de la entrada y desactivaremos las animaciones de apertura y cierre. Estamos utilizando ConnectedPositioningStrategy para esto:

    <igx-input-group class="autocomplete"> <label igxLabel for="cinema">Cinema</label> <input igxInput name="cinema" type="text" [igxAutocomplete]="townsPanel" [igxAutocompleteSettings]="settings"/> </igx-input-group> <igx-drop-down #townsPanel maxHeight="300px"> <igx-drop-down-item-group *ngFor="let town of towns" [label]="town.name"> <igx-drop-down-item *ngFor="let cinema of town.cinemas" [value]="cinema"> {{cinema}} </igx-drop-down-item> </igx-drop-down-item-group> </igx-drop-down>
    export class AutocompleteComponent { public settings = { positionStrategy: new ConnectedPositioningStrategy({ closeAnimation: null, openAnimation: null, verticalDirection: VerticalAlignment.Top, verticalStartPoint: VerticalAlignment.Top }) }; public towns = [ { name: 'New York', cinemas: [ 'Regal Cinemas', 'Village East Cinema', 'Roxy Cinema', 'The Paris Theatre' ]}, { name: 'Los Angeles', cinemas: [ 'Arc Light', 'Pacific Cinerama Dome', 'New Beverly Cinema', 'Downtown Independent' ]}, { name: 'Seattle', cinemas: [ 'Central Cinema', 'Grand Illusion Cinema', 'Ark Lodge Cinemas', 'Skyway Outdoor Cinema' ]} ]; }
    Nota

    La estrategia de posicionamiento predeterminada es AutoPositionStrategy y el menú desplegable se abre según el espacio disponible.

    Si todo salió bien, deberías ver esto en tu navegador:

    Navegación por teclado

    • ⬆ / ⬇ o escribir la entrada abrirá el menú desplegable, si está cerrado.
    • ⬇- pasará al siguiente elemento desplegable.
    • ⬆- pasará al elemento desplegable anterior.
    • ENTER confirmará el elemento ya seleccionado y cerrará el menú desplegable.
    • ESC cerrará el menú desplegable.
    Nota

    Cuando se abre el autocompletar Angular, el primer elemento de la lista se selecciona automáticamente. Lo mismo es válido cuando se filtra la lista.

    También puede ver cómo nuestro WYSIWYG App Builder ™ agiliza toda la historia del diseño al código en un 80 % utilizando componentes Angular reales.

    Soporte de compatibilidad

    La aplicación de la directiva igxAutocomplete decorará el elemento con los siguientes atributos ARIA:

    • role="combobox" - rol del elemento donde se aplica la directiva.
    • aria-autocomplete="list" - indica que las sugerencias para completar la entrada se proporcionan en forma de lista
    • Atributo aria-haspopup="listbox" para indicar que igxAutocomplete puede abrir un contenedor para sugerir valores.
    • aria-expanded="true"/"false": valor que depende del estado contraído del menú desplegable.
    • aria-owns="dropDownID" - ID del menú desplegable utilizado para mostrar sugerencias.
    • aria-activededescendiente="listItemId" - el valor se establece en la identificación del elemento de la lista activa actual.

    El componente drop-down, utilizado como proveedor de sugerencias, expondrá los siguientes atributos ARIA:

    • role="listbox" - aplicado en el contenedor del componente igx-drop-down​
    • role="group" - aplicado en el contenedor del componente igx-drop-down-item-group​
    • role="option" - aplicado en el contenedor del componente igx-drop-down-item​
    • aria-disabled="true"/"false" se aplica en los contenedores de componentes igx-drop-down-item y igx-drop-down-item-group cuando están deshabilitados.

    Estilismo

    Cada componente tiene su propio tema.

    Para darle estilo a igxAutocomplete, debe diseñar los componentes que lo contienen. En nuestro caso, necesitamos usar tanto el tema del grupo de entrada como el tema desplegable.

    Eche un vistazo a las secciones de estilo igxInputGroup e igxDropdown para comprender mejor cómo diseñar esos dos componentes.

    Referencia de API

    Dependencias temáticas

    Recursos adicionales

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.