React ComboBox Features

    Ignite UI for React ComboBox 구성 요소는 필터링 및 그룹화와 같은 여러 기능을 제공합니다.

    Combobox Features Example

    다음 데모는 런타임에 사용/사용하지 않도록 설정되는 몇 가지 IgrCombo 기능을 보여줍니다.

    이 샘플에서는 구성 요소를 사용할 IgrSwitch 것이므로 콤보와 함께 가져와야 합니다.

    import { IgrCombo, IgrSwitch  } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

    그런 다음 React의 useState 훅을 사용하여 스위치 상태가 변경될 때 업데이트될 변수를 선언합니다. 이렇게 하면 업데이트를 추적하고 그에 따라 콤보 입력에 대한 변경 사항이 반영됩니다.

    const [disableFiltering, setDisableFiltering] = useState(false);
const [caseSensitiveIcon, setCaseSensitiveIcon] = useState(false);
const [groupingEnabled, setGroupingEnabled] = useState(false);
const [comboDisabled, setComboDisabled] = useState(false);

<IgrCombo
    valueKey="id"
    displayKey="name"
    label="Cities"
    placeholder="Pick a city"
    placeholderSearch="Search for a city"
    data={Cities}
    disableFiltering={disableFiltering}
    caseSensitiveIcon={caseSensitiveIcon}
    groupKey={groupingEnabled ? "country" : undefined}
    disabled={comboDisabled}>
</IgrCombo>


<IgrSwitch checked={disableFiltering} onChange={e => setDisableFiltering(e.detail.checked)}>
    <span>Disable Filtering</span>
</IgrSwitch>
<IgrSwitch checked={caseSensitiveIcon} onChange={e => setCaseSensitiveIcon(e.detail.checked)}>
    <span>Show Case-sensitive Icon</span>
</IgrSwitch>
<IgrSwitch checked={groupingEnabled} onChange={e => setGroupingEnabled(e.detail.checked)}>
    <span>Enable Grouping</span>
</IgrSwitch>
<IgrSwitch checked={comboDisabled} onChange={e => setComboDisabled(e.detail.checked)}>
    <span>Disable Combo</span>
</IgrSwitch>

    ​groupKey 속성을 해당 데이터 소스 필드로 설정하여 그룹화를 활성화/비활성화합니다.

    groupKey={groupingEnabled ? "country" : undefined}

    특징

    필터링

    기본적으로 ComboBox의 필터링은 활성화되어 있습니다. disableFiltering 속성을 설정하여 비활성화할 수 있습니다.

    검색 대소문자 구분을 활성화하면 필터링 옵션이 더욱 향상될 수 있습니다. 최종 사용자가 대소문자 구분을 제어할 수 있도록 caseSensitiveIcon 속성을 사용하여 대소문자 구분 아이콘을 설정할 수 있습니다.

    <IgrCombo disableFiltering={true} caseSensitiveIcon={true}></IgrCombo>

    필터링 옵션

    Ignite UI for React IgrCombo 두 옵션의 CaseSensitive 구성을 전달 FilterKey 할 수 있는 필터링 속성을 하나 더 노출합니다. 옵션 FilterKey 목록을 필터링하는 데 사용해야 하는 데이터 원본 필드를 나타냅니다. CaseSensitive이 옵션은 필터링이 대/소문자를 구분해야 하는지 여부를 나타냅니다.

    다음 코드 조각은 이름 대신 국가별로 데이터 소스의 도시를 필터링하는 방법을 보여줍니다. 또한 기본적으로 필터링에서 대소문자를 구분하도록 설정하고 있습니다.

    const options = {
    filterKey: 'country',
    caseSensitive: true
};

<IgrCombo filteringOptions={options} />

    Grouping

    ​groupKey 옵션을 정의하면 제공된 키에 따라 항목이 그룹화됩니다.

    <IgrCombo groupKey="region" />

    [!Note] The groupKey property will only have effect if your data source consists of complex objects.

    정렬 방향

    ComboBox 구성 요소는 그룹을 오름차순으로 정렬해야 하는지 내림차순으로 정렬해야 하는지 설정하는 옵션도 제공합니다. 기본적으로 정렬 순서는 오름차순입니다.

    <IgrCombo groupSorting="desc" />

    Label

    레이블은 IgrCombo 다음 속성을 사용하여 쉽게 설정할 수 있습니다. label​

    <IgrCombo label="Cities" />

    Placeholder

    ComboBox 구성 요소 입력과 드롭다운 메뉴 내에 있는 검색 입력 모두에 대해 자리 표시자 텍스트를 지정할 수 있습니다.

    <IgrCombo placeholder="Pick a city" placeholderSearch="Search for a city" />

    Autofocus

    페이지 로드 시 ComboBox에 자동으로 초점을 맞추려면 다음 코드를 사용할 수 있습니다.

    <IgrCombo autofocus={true} />

    Search Input Focus

    ComboBox 검색 입력은 기본적으로 초점이 맞춰져 있습니다. 이 기능을 비활성화하고 옵션 목록으로 포커스를 이동하려면 아래와 같이 autofocusList 속성을 사용하십시오.

    <IgrCombo autofocusList={true} />

    Required

    필수 속성을 설정하여 ComboBox를 필수로 표시할 수 있습니다.

    <IgrCombo required={true} />

    Disable ComboBox

    ​disabled 속성을 사용하여 ComboBox를 비활성화할 수 있습니다.

    <IgrCombo disabled={true} />

    Additional Resources