React Single Selection ComboBox

    The React ComboBox supports single-selection mode and quick filtering of the list of items via the main input prompt. Users can quickly type in the item they are looking for and be presented with a list of options. Upon pressing the enter key, the first highlighted match will be selected.

    React Single Selection Example

    단일 선택 및 빠른 필터링을 가능하게 하려면 속성을 설정singleSelect​IgrCombo 하세요. 사용자 경험과 키보드 탐색은 대부분 동일하지만, 검색 쿼리를 옵션 목록 위의 특수 필터링 박스에 입력하는 대신 메인 입력 박스를 사용할 예정입니다.

    <IgrCombo singleSelect></IgrCombo>

    Selection API

    이 속성을 적용한singleSelect ComboBox의 선택 API는 대부분 동일하지만, 이 속성이 설정되지 않은 ComboBox와 비교했을 때 몇 가지 중요한 차이점이 있습니다.

    주요 차이점은 한 번에 한 가지 아이템만 선택할 수 있다는 점입니다. 예를 들어, 콤보 컴포넌트에 avalueKey를 지정했다면, 여러 아이템을 theselect /deselect 메서드에 전달해도 효과가 없습니다. 즉, 이전에 선택한 항목들은 새 선택을 하면 자동으로 선택 해제됩니다.

    단일 선택 콤보에서 프로그래밍 방식으로 항목을 선택/선택 취소하는 방법은 다음과 같습니다.

    Selecting items

    // select the item matching the 'BG01' value of the value key field.
comboRef.current.select('BG01');

    새 선택 없이 항목을 선택 해제하려면 메서드를deselect 호출하세요.

    항목 선택 해제

    // deselect the item matching the 'BG01' value of the value key field.
comboRef.current.deselect('BG01');

    Disabled features

    당연히 일부 구성 옵션은 단일 선택 ComboBox에 영향을 주지 않습니다.

    Placeholder

    속성에placeholderSearch 값을 할당해도 결과가 나오지 않는데, 보통 옵션 목록 위에 배치되는 필터링 입력이 단일 선택 콤보박스에 없기 때문입니다.

    Auto-focusing the list of options

    단일 선택 콤보박스에 옵션을 설정해도autofocusList 효과가 없습니다.

    Keyboard Navigation

    키보드 탐색은 단일 선택이 아닌 ComboBox와 동일하게 작동해야 합니다. 단, 이제 기본 입력이 필터링 프롬프트 역할을 하므로 필터링/검색 입력에 적용되는 모든 키보드 동작이 기본 입력으로 이동됩니다. 입력 프롬프트.

    Other Features

    다른 모든 기능은 단일 선택이 아닌 ComboBox 구성 요소와 동일하게 작동합니다.

    API Reference

    Additional Resources