Descripción general de la directiva de autocompletado Angular

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

LaigxAutocomplete directiva proporciona una forma de mejorar una entrada de texto mostrando unaigxDropDown con opciones sugeridas, proporcionadas por el desarrollador. Las sugerencias aparecerán cuando empieces a escribir la entrada de texto o a usar lasArrow Up teclas /Arrow Down.

Angular Autocomplete Example

El siguiente ejemplo de autocompletar Angular genera una lista desplegable de sugerencias a medida que 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 la directiva Ignite UI for Angular para Angular componentes y 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 al Ignite UI for Angular, lea el tema de introducción.

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

// app.module.ts

...
import { IgxAutocompleteModule, IgxDropDownModule } from 'igniteui-angular/drop-down';
import { IgxInputGroupModule } from 'igniteui-angular/input-group';
// import { IgxAutocompleteModule, IgxDropDownModule, IgxInputGroupModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [
        ..., 
        IgxAutocompleteModule,
        IgxDropDownModule,
        IgxInputGroupModule,
        ....
    ],
    ...
})
export class AppModule {}

Alternativamente,16.0.0 puedes importarlaIgxAutocompleteDirective como una directiva independiente.

// home.component.ts

...
import { IgxAutocompleteDirective, IGX_DROP_DOWN_DIRECTIVES } from 'igniteui-angular/drop-down';
import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular/input-group';
// 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 tienes importado el módulo o directiva de Ignite UI for Angular Action Strip, puedes empezar con una configuración básica deligxAutocomplete componente.

Using the Angular Autocomplete

Para aplicar la funcionalidad de autocompletado a una entrada, añade laigxAutocomplete directiva, referenciando el 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

UtilizaigxAutocomplete eligxDropDown como proveedor para las opciones disponibles, lo que significa que todas las capacidades del componente desplegable pueden usarse en el autocompletado.

Disable Angular Autocomplete

Puedes desactivar el autocompletado de Angular usando laIgxAutocompleteDisabled entrada:

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

Autocomplete Settings

Eligx-autocomplete posicionamiento desplegable, la estrategia de desplazamiento y la toma de corriente pueden configurarse mediante elIgxAutocompleteSettings.

En el siguiente ejemplo de Autocompletado Angular colocaremos el desplegable sobre la entrada y desactivaremos las animaciones de apertura y cierre. Estamos usando elConnectedPositioningStrategy 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 por defecto esAutoPositionStrategy que el 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 autocompletado Angular, se selecciona automáticamente el primer elemento de la lista. Lo mismo ocurre cuando se filtra la lista.

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

Compatibility support

Aplicar laigxAutocomplete directiva 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
aria-haspopup="listbox" para indicar queigxAutocomplete 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.

Eldrop-down componente, utilizado como proveedor para sugerencias, expondrá los siguientes atributos ARIA:

role="listbox" - aplicado en eligx-drop-down contenedor de componentes
role="group" - aplicado en eligx-drop-down-item-group contenedor de componentes
role="opción" - aplicado en eligx-drop-down-item contenedor de componentes
ARIA-disabled="true"/"false" aplicado enigx-drop-down-item contenedores componentesigx-drop-down-item-group cuando están desactivados.

Estilismo

Cada componente tiene su propio tema.

Para que eligxAutocomplete estilizado sea estilizado, tienes que estilizar sus componentes que lo contienen. En nuestro caso, estos son el tema de grupo de entrada y el tema desplegable.

Echa un vistazo a lasigxInputGroup secciones de yigxDropdown de estilismo para entender mejor cómo estilizar 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 autocompletado 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