Angular 자동완성 지침 개요

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

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

    Angular 자동완성 예제

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

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.

    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.

    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>
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 사용 가능한 옵션의 공급자로 사용합니다. 즉, 드롭다운 구성 요소의 모든 기능을 자동 완성에 사용할 수 있습니다.

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

    자동완성 설정

    ​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
    Edit in:

    키보드 탐색

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

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

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

    App Builder | CTA 배너

    호환성 지원

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

    테마 종속성

    추가 리소스

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