Angular 자동완성 지시어 개요

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

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

    Angular 자동완성 예

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

    Ignite UI for Angular 시작하기

    ​Angular 구성 요소 Ignite UI for Angular 및 특히 Autocomplete 지시문을 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.

    ng add igniteui-angular

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

    또는 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 {}

    이제 Ignite UI for Angular 가져왔으므로 igxAutocomplete 구성 요소의 기본 구성으로 시작할 수 있습니다.

    Angular 자동 완성 사용

    자동 완성 기능을 입력에 적용하려면 드롭다운을 참조하여 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>

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

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

    Angular 자동 완성 비활성화

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

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

    자동완성 설정

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

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

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

    키보드 탐색

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

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

    또한 WYSIWYG App Builder ™가 실제 Angular 구성 요소를 사용하여 전체 디자인에서 코드까지 전체 과정을 80% 간소화하는 방법도 확인할 수 있습니다.

    호환성 지원

    ​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 참조

    테마 종속성

    추가 리소스

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