Web Components 단일 선택 콤보 상자
Web Components ComboBox 단일 선택 모드와 기본 입력 프롬프트를 통한 항목 목록의 빠른 필터링을 지원합니다. 사용자는 찾고 있는 항목을 빠르게 입력하고 옵션 목록을 표시할 수 있습니다. Enter 키를 누르면 첫 번째로 강조 표시된 일치 항목이 선택됩니다.
Web Components Single Selection Example
단일 선택 및 빠른 필터링을 활성화하려면 singleSelect의 재산 ComboBox 요소. 사용자 경험과 키보드 탐색은 대부분 동일하게 유지되지만 옵션 목록 위의 특수 필터링 상자에 검색어를 입력하는 대신 기본 입력 상자가 사용됩니다.
<igc-combo single-select></igc-combo>
Selection API
singleSelect 속성이 적용된 ComboBox의 선택 API는 대부분 동일하게 유지되지만 이 속성이 설정되지 않은 ComboBox와 비교할 때 몇 가지 중요한 차이점이 있습니다.
가장 큰 차이점은 언제든지 하나의 항목만 선택할 수 있다는 것입니다. 예를 들어, 콤보 구성 요소에 대해 valueKey 지정한 경우 둘 이상의 항목을 select / deselect 메서드에 전달해도 아무런 효과가 없습니다. 이는 또한 이전에 선택한 항목이 새로 선택되면 자동으로 선택 취소된다는 의미입니다.
단일 선택 콤보에서 프로그래밍 방식으로 항목을 선택/선택 취소하는 방법은 다음과 같습니다.
항목 선택:
// select the item matching the 'BG01' value of the value key field.
combo.select('BG01');
새로 선택하지 않고 항목을 선택 취소하려면 deselect 메서드를 호출하세요.
항목 선택 취소:
// deselect the item matching the 'BG01' value of the value key field.
combo.deselect('BG01');
Disabled features
당연히 일부 구성 옵션은 단일 선택 ComboBox에 영향을 주지 않습니다.
Placeholder
placeholderSearch 속성에 값을 할당하면 일반적으로 옵션 목록 위에 배치되는 필터링 입력이 단일 선택 ComboBox에 존재하지 않으므로 결과가 생성되지 않습니다.
Autofocusing the list of options
단일 선택 ComboBox에 autofocusList 옵션을 설정해도 아무런 효과가 없습니다.
Keyboard Navigation
키보드 탐색은 단일 선택이 아닌 ComboBox와 동일하게 작동해야 합니다. 단, 이제 기본 입력이 필터링 프롬프트 역할을 하므로 필터링/검색 입력에 적용되는 모든 키보드 동작이 기본 입력으로 이동됩니다. 입력 프롬프트.
Other Features
다른 모든 기능은 단일 선택이 아닌 ComboBox 구성 요소와 동일하게 작동합니다.