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.

Angular Autocomplete Example

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.

Getting Started with Ignite UI for Angular Autocomplete

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.

Using the Angular Autocomplete

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()));
    }
}

Note

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.

Disable Angular Autocomplete

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>

Autocomplete Settings

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'
        ]}
    ];
}

Note

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:

⬆ / ⬇ 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.

Note

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.

Compatibility support

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.

API Reference

Theming Dependencies

Additional Resources

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

Descripción general de la directiva de autocompletar Angular

Angular Autocomplete Example

Getting Started with Ignite UI for Angular Autocomplete

Using the Angular Autocomplete

Note

Disable Angular Autocomplete

Autocomplete Settings

Note

Keyboard Navigation

Note

Compatibility support

Estilismo

API Reference

Theming Dependencies

Additional Resources

Tematización