Visão geral da diretiva Angular Autocomplete

Angular Autocomplete é uma diretiva de caixa de pesquisa que permite que os usuários encontrem, filtrem e selecionem facilmente um item de uma lista de sugestões enquanto digitam. Rico em recursos, ele suporta vinculação de dados contínua, filtragem, agrupamento, opções de personalização de IU e outras funcionalidades integradas para que os desenvolvedores possam criar uma experiência de pesquisa de preenchimento automático intuitiva.

AigxAutocomplete diretiva oferece uma forma de aprimorar uma entrada de texto mostrando umigxDropDown com opções sugeridas, fornecidas pelo desenvolvedor. As sugestões vão aparecer quando você começar a digitar o texto ou usar asArrow Up teclas /Arrow Down.

Angular Autocomplete Example

O exemplo de preenchimento automático Angular abaixo gera uma lista suspensa de sugestões conforme os usuários começam a digitar o nome de uma cidade na caixa de texto de entrada.

Getting Started with Ignite UI for Angular Autocomplete

Para começar a usar o Ignite UI for Angular para Angular Components e a diretiva Autocomplete em particular, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:

ng add igniteui-angular

Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.

O próximo passo é importar o IgxAutocompleteModule e o IgxDropDownModule em nosso app.module. SeigxAutocomplete for aplicado em um igxInput, o igxInputGroupModule também é necessário:

// 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 você pode importar comoIgxAutocompleteDirective uma diretiva independente.

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

Agora que você importou o módulo ou diretiva Ignite UI for Angular Action Strip, pode começar com uma configuração básica doigxAutocomplete componente.

Using the Angular Autocomplete

Para aplicar a funcionalidade de autopreenchimento a uma entrada, adicione aigxAutocomplete diretiva, referenciando o menu suspenso:

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

Adicione a lista que será mostrada no dropdown. Se quiser que a lista seja filtrada enquanto digita, use a interface 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

EleigxAutocomplete usa oigxDropDown como provedor para as opções disponíveis, o que significa que todas as capacidades do componente suspenso podem ser usadas no autocompletamento.

Disable Angular Autocomplete

Você pode desativar o Angular autocompletar usando aIgxAutocompleteDisabled 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

Oigx-autocomplete posicionamento suspenso, a estratégia de rolagem e a tomada podem ser configurados usando oIgxAutocompleteSettings.

No exemplo de Autocomplete a seguir Angular, posicionaremos o menu suspenso acima da entrada e desativaremos as animações de abertura e fechamento. Estamos usando oConnectedPositioningStrategy para isso:

<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

A estratégia padrão de posicionamento éAutoPositionStrategy que o menu suspenso é aberto de acordo com o espaço disponível.

Se tudo correr bem, você deverá ver isto no seu navegador:

⬆ / ⬇ ou digitar a entrada abrirá o menu suspenso, se estiver fechado.
⬇- moverá para o próximo item suspenso.
⬆- moverá para o item suspenso anterior.
ENTER confirmará o item já selecionado e fechará o menu suspenso.
ESC fechará o menu suspenso.

Note

Quando o Angular autocomplete abre, então o primeiro item da lista é selecionado automaticamente. O mesmo é válido quando a lista é filtrada.

Você também pode ver como nosso WYSIWYG App Builder ™ simplifica toda a história do design ao código em 80% usando componentes Angular reais.

Compatibility support

Aplicar aigxAutocomplete diretiva decorará o elemento com os seguintes atributos ARIA:

role="combobox" - função do elemento, onde a diretiva é aplicada.
aria-autocomplete="list" - indica que as sugestões de conclusão de entrada são fornecidas na forma de lista
aria-haspopup="listbox" para indicar queigxAutocomplete pode abrir um contêiner para sugerir valores.
aria-expanded="true"/"false" - valor dependendo do estado recolhido do menu suspenso.
aria-owns="dropDownID" - id do menu suspenso usado para exibir sugestões.
aria-activedescendant="listItemId" - o valor é definido como o id do elemento da lista ativa atual.

Odrop-down componente, usado como provedor para sugestões, expõe os seguintes atributos ARIA:

role="listbox" - aplicado noigx-drop-down contêiner de componentes
role="group" - aplicado noigx-drop-down-item-group contêiner de componentes
role="option" - aplicado noigx-drop-down-item contêiner de componentes
aria-disabled="true"/"false" aplicado nosigx-drop-down-item containers componentesigx-drop-down-item-group quando eles são desativados.

Estilização

Cada componente tem seu próprio tema.

Para conseguir oigxAutocomplete estilo, você precisa estilizar seus componentes que contêm o estilo. No nosso caso, esses são o tema do grupo de entrada e o tema suspenso.

Dê uma olhada nasigxInputGroup seções de eigxDropdown de estilo para entender melhor como estilizar esses dois componentes.

API Reference

Theming Dependencies

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

Visão geral da diretiva Angular Autocomplete

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

Estilização

API Reference

Theming Dependencies

Additional Resources

Temas