Angular 자동완성 지침 개요

Angular Autocomplete는 사용자가 입력하는 동안 제안 목록에서 항목을 쉽게 찾고, 필터링하고, 선택할 수 있도록 하는 검색 상자 지시문입니다. 기능이 풍부하여 원활한 데이터 바인딩, 필터링, 그룹화, UI 사용자 지정 옵션 및 기타 기본 제공 기능을 지원하므로 개발자는 직관적인 자동완성 검색 환경을 만들 수 있습니다.

​igxAutocomplete 지시어는 개발자가 제공한 제안 옵션과 함께 igxDropDown 표시하여 텍스트 입력을 향상시키는 방법을 제공합니다. 텍스트 입력을 시작하거나 Arrow Up / Arrow Down 키를 사용하면 제안 사항이 표시됩니다.

Angular Autocomplete Example

아래의 Angular Autocomplete 예제는 사용자가 입력 텍스트 상자에 도시 이름을 입력하기 시작하면 드롭다운 제안 목록을 생성합니다.

EXAMPLE

TS

HTML

SCSS

import { Component, Pipe, PipeTransform, forwardRef } from '@angular/core';
import { IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxAutocompleteDirective, IgxDropDownComponent, IgxDropDownItemComponent } from 'igniteui-angular';
import { FormsModule } from '@angular/forms';


@Component({
    selector: 'app-autocomplete',
    styleUrls: ['./autocomplete.component.scss'],
    templateUrl: './autocomplete.component.html',
    imports: [IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxAutocompleteDirective, IgxDropDownComponent, IgxDropDownItemComponent, forwardRef(() => AutocompletePipeStartsWith)]
})
export class AutocompleteBasicComponent {
    public towns = [];
    public townSelected;

    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',
            'Jambol', 'Talin', 'Zlatna Panega', 'Queenstown', 'Gabrovo', 'Ugurchin', 'Xanthi'];
    }
}

@Pipe({
    name: 'startsWith'
})
export class AutocompletePipeStartsWith implements PipeTransform {
    public transform(collection: any[], term = '') {
        return collection.filter((item) => item.toString().toLowerCase().startsWith(term.toString().toLowerCase()));
    }
}
tsコピー

<igx-input-group class="autocomplete">
  <label igxLabel for="town">Town</label>
  <input igxInput name="town" type="text"
    [igxAutocomplete]="townsPanel"
    [(ngModel)]="townSelected"/>
  </igx-input-group>
  <igx-drop-down #townsPanel maxHeight="300px">
    @for (town of towns | startsWith:townSelected; track town) {
      <igx-drop-down-item [value]="town">
        {{town}}
      </igx-drop-down-item>
    }
  </igx-drop-down>

htmlコピー

.autocomplete {
    width: 50%;
}scssコピー

Edit in: CodesandboxStackBlitz

Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

Getting Started with Ignite UI for Angular Autocomplete

특히 Angular 구성 요소 및 자동 완성 지시문에 대한 Ignite UI for Angular 시작하려면 먼저 Ignite UI for Angular를 설치해야 합니다. 기존 Angular 응용 프로그램에서 다음 명령을 입력합니다.

ng add igniteui-angular
cmd

Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.

다음 단계는 app.module에서 IgxAutocompleteModule 및 IgxDropDownModule을 가져오는 것입니다. igxAutocomplete​ ​igxInput에 적용된 경우 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 {}
typescript

또는 16.0.0부터 IgxAutocompleteDirective 독립 실행형 지시문으로 가져올 수 있습니다.

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

이제 Ignite UI for Angular Action Strip 모듈 또는 지시문을 가져왔으므로 구성 요소의 기본 구성부터 시작할 수 있습니다 igxAutocomplete.

Using the Angular Autocomplete

자동 완성 기능을 입력에 적용하려면 드롭다운을 참조하여 igxAutocomplete 지시문을 추가하세요.

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

드롭다운에 표시될 목록을 추가합니다. 입력하는 동안 목록을 필터링하려면 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()));
    }
}
typescript

​igxAutocomplete는 igxDropDown 사용 가능한 옵션의 공급자로 사용합니다. 즉, 드롭다운 구성 요소의 모든 기능을 자동 완성에 사용할 수 있습니다.

Disable Angular Autocomplete

​IgxAutocompleteDisabled 입력을 사용하여 Angular 자동완성을 비활성화할 수 있습니다.

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

Autocomplete Settings

​igx-autocomplete 드롭다운 위치 지정, 스크롤 전략 및 출력은 IgxAutocompleteSettings 사용하여 구성할 수 있습니다.

다음 Angular Autocomplete 예제에서는 드롭다운을 입력 위에 배치하고 열기 및 닫기 애니메이션을 비활성화합니다. 이를 위해 ConnectedPositioningStrategy를 사용합니다.

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

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

기본 위치 지정 전략은 AutoPositionStrategy 이며 사용 가능한 공간에 따라 드롭다운이 열립니다.

모든 것이 올바르게 진행되었다면 브라우저에 다음과 같은 내용이 표시됩니다.

EXAMPLE

TS

HTML

SCSS

import { Component, Pipe, PipeTransform } from '@angular/core';
import { ConnectedPositioningStrategy, VerticalAlignment, IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxAutocompleteDirective, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemComponent } from 'igniteui-angular';
import { FormsModule } from '@angular/forms';

import { AutocompletePipeStartsWith } from '../autocomplete/autocomplete.component';
@Component({
    selector: 'app-movie-availability',
    styleUrls: ['./movie.component.scss'],
    templateUrl: './movie.component.html',
    imports: [IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxAutocompleteDirective, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemComponent, AutocompletePipeStartsWith]
})
export class MovieComponent {
    public cinemaSelected;

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

@Pipe({
    name: 'startsWith'
})
export class AutocompletePipeStartsWith2 implements PipeTransform {
    public transform(collection: any[], term = '') {
        return collection.filter((item) => item.toString().toLowerCase().startsWith(term.toString().toLowerCase()));
    }
}
tsコピー

<igx-input-group class="autocomplete">
  <label igxLabel for="cinema">Cinema</label>
  <input igxInput name="cinema" type="text"
    [igxAutocomplete]="townsPanel"
    [igxAutocompleteSettings]="settings"
    [(ngModel)]="cinemaSelected"
    />
  </igx-input-group>
  <igx-drop-down #townsPanel maxHeight="300px">
    @for (town of towns; track town) {
      <igx-drop-down-item-group [label]="town.name">
        @for (cinema of town.cinemas | startsWith:cinemaSelected; track cinema) {
          <igx-drop-down-item [value]="cinema">
            {{cinema}}
          </igx-drop-down-item>
        }
      </igx-drop-down-item-group>
    }
  </igx-drop-down>
htmlコピー

.autocomplete {
    width: 50%;
}
scssコピー

Edit in: CodesandboxStackBlitz

Keyboard Navigation

• 드롭다운이 닫혀 있는 경우 ⬆ / ⬇ 또는 입력을 입력하면 드롭다운이 열립니다.
• ⬇- 다음 드롭다운 항목으로 이동합니다.
• ⬆- 이전 드롭다운 항목으로 이동합니다.
• ENTER를 누르면 이미 선택한 항목이 확인되고 드롭다운이 닫힙니다.
• ESC는 드롭다운을 닫습니다.

Angular 자동완성이 열리면 목록의 첫 번째 항목이 자동으로 선택됩니다. 목록이 필터링될 때도 마찬가지입니다.

또한 WYSIWYG App Builder ™가 실제 Angular 구성 요소를 사용하여 전체 설계-코드 스토리를 80% 간소화하는 방법도 확인할 수 있습니다.

Compatibility support

​igxAutocomplete 지시문을 적용하면 요소가 다음 ARIA 속성으로 장식됩니다.

• role="combobox" - 지시문이 적용되는 요소의 역할입니다.
• aria-autocomplete="list" - 입력 완성 제안이 목록 형식으로 제공됨을 나타냅니다.
• aria-haspopup="listbox" 속성은 igxAutocomplete 값을 제안하는 컨테이너를 팝업할 수 있음을 나타냅니다.
• aria-expanded="true"/"false" - 드롭다운의 접힌 상태에 따른 값입니다.
• aria-owns="dropDownID" - 제안 표시에 사용되는 드롭다운의 ID입니다.
• aria-activedescendant="listItemId" - 값은 현재 활성 목록 요소의 ID로 설정됩니다.

제안 제공자로 사용되는 drop-down 구성요소는 다음 ARIA 속성을 노출합니다.

• role="listbox" -igx-drop-down 구성 요소 컨테이너에 적용됨
• role="group" -igx-drop-down-item-group 구성 요소 컨테이너에 적용됨
• role="option" -igx-drop-down-item 구성 요소 컨테이너에 적용됨
• aria-disabled="true"/"false"는 비활성화된 경우 igx-drop-down-item, igx-drop-down-item-group 구성 요소 컨테이너에 적용됩니다.

스타일링

모든 구성 요소에는 고유한 테마가 있습니다.

스타일을 지정 igxAutocomplete 하려면 포함 된 구성 요소의 스타일을 지정해야합니다. 우리의 경우 input-group-theme와 drop-down-theme 입니다.

​igxInputGroup 및 igxDropdown 스타일링 섹션을 살펴보고 두 구성 요소의 스타일을 지정하는 방법을 더 잘 이해하세요.

API Reference

• IgxAutocomplete 지시어
• IgxDropDown구성요소
• IgxInputGroupComponent

Theming Dependencies

• IgxDropDown 테마
• IgxInputGroup 테마

Additional Resources

• IgxDropDown
• IgxInput그룹
• 템플릿 기반 양식 통합

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Ignite UI for Angular 포럼
• ​GitHub Ignite UI for Angular