Angular 자동완성 지시어 개요
Angular Autocomplete는 사용자가 입력하는 동안 제안 목록에서 항목을 쉽게 찾고 필터링하고 선택할 수 있도록 하는 검색 상자 지시어입니다. 기능이 풍부하고 원활한 데이터 바인딩, 필터링, 그룹화, UI 사용자 정의 옵션 및 기타 내장 기능을 지원하므로 개발자는 직관적인 자동 완성 검색 환경을 만들 수 있습니다.
igxAutocomplete 지시어는 개발자가 제공한 제안 옵션과 함께 igxDropDown 표시하여 텍스트 입력을 향상시키는 방법을 제공합니다. 텍스트 입력을 시작하거나 Arrow Up / Arrow Down 키를 사용하면 제안 사항이 표시됩니다.
Angular Autocomplete Example
아래 Angular Autocomplete 예제는 사용자가 입력 텍스트 상자에 도시 이름을 입력하기 시작하면 드롭다운 제안 목록을 생성합니다.
Getting Started with Ignite UI for Angular Autocomplete
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 구성 요소의 기본 구성으로 시작할 수 있습니다.
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>
드롭다운에 표시될 목록을 추가합니다. 입력하는 동안 목록을 필터링하려면 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
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>
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>
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
기본 위치 지정 전략은 AutoPositionStrategy 이며 사용 가능한 공간에 따라 드롭다운이 열립니다.
모든 것이 올바르게 진행되었다면 브라우저에 다음과 같은 내용이 표시됩니다.
Keyboard Navigation
- 드롭다운이 닫혀 있는 경우 ⬆ / ⬇ 또는 입력을 입력하면 드롭다운이 열립니다.
- ⬇- 다음 드롭다운 항목으로 이동합니다.
- ⬆- 이전 드롭다운 항목으로 이동합니다.
- ENTER를 누르면 이미 선택한 항목이 확인되고 드롭다운이 닫힙니다.
- ESC는 드롭다운을 닫습니다.
Note
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
Theming Dependencies
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub