Angular 자동완성 지침 개요
Angular Autocomplete는 사용자가 입력하는 동안 제안 목록에서 항목을 쉽게 찾고, 필터링하고, 선택할 수 있도록 하는 검색 상자 지시문입니다. 기능이 풍부하여 원활한 데이터 바인딩, 필터링, 그룹화, UI 사용자 지정 옵션 및 기타 기본 제공 기능을 지원하므로 개발자는 직관적인 자동완성 검색 환경을 만들 수 있습니다.
이 지침은igxAutocomplete 개발자가 제공하는 제안 옵션을 보여주igxDropDown 어 텍스트 입력을 향상시키는 방법을 제공합니다. 텍스트 입력을 시작하거나 키/키를 사용할Arrow UpArrow Down 때 제안이 표시됩니다.
Angular Autocomplete Example
아래의 Angular Autocomplete 예제는 사용자가 입력 텍스트 상자에 도시 이름을 입력하기 시작하면 드롭다운 제안 목록을 생성합니다.
Getting Started with Ignite UI for Angular Autocomplete
특히 Angular 구성 요소 및 자동 완성 지시문에 대한 Ignite UI for Angular 시작하려면 먼저 Ignite UI for Angular를 설치해야 합니다. 기존 Angular 응용 프로그램에서 다음 명령을 입력합니다.
ng add igniteui-angular
Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.
다음 단계는 다음 단계를 가져오는 것입니다. IgxAutocompleteModule 그리고 IgxDropDownModule 우리 app.module. 면igxAutocomplete이 경우 igx입력, 그 igx입력그룹모듈 또한 다음과 같이 요구됩니다:
// 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 {}
또는16.0.0 현재로서는 독립 실행형 명령어로 가져올IgxAutocompleteDirective 수도 있습니다.
// 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 {}
이제 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>
드롭다운에 표시될 목록을 추가합니다. 입력하는 동안 목록을 필터링하려면 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
이 기능은igxAutocompleteigxDropDown 사용 가능한 옵션의 제공자로 사용되며, 이는 드롭다운 컴포넌트의 모든 기능을 자동완성에서 사용할 수 있음을 의미합니다.
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 자동 완성 예시에서는 드롭다운을 입력 위에 위치시키고 오프닝과 클로징 애니메이션을 비활성화할 것입니다. 우리는 이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-itemigx-drop-down-item-group됩니다.
스타일링
모든 구성 요소에는 고유한 테마가 있습니다.
스타일링을 받igxAutocomplete 으려면 그 안에 포함된 구성 요소를 스타일링해야 합니다. 우리의 경우, 이들은 입력-그룹-테마와 드롭다운 테마 입니다.
스타일링 섹션과igxInputGroup 스타일링 섹션을 살펴보igxDropdown 면서 이 두 요소를 어떻게 스타일링할지 더 잘 이해할 수 있습니다.
API Reference
Theming Dependencies
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub