React ComboBox Features

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

    Combobox Features Example

    The following demo shows some IgrCombo features that are enabled/disabled at runtime:

    In our sample we are going to use the IgrSwitch component, so we have to import them together with the combo:

    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>

    Note that grouping is enabled/disabled by setting the groupKey property to a corresponding data source field:

    groupKey={groupingEnabled ? "country" : undefined}

    특징

    필터링

    By default, filtering in the ComboBox is enabled. It can be disabled by setting the disableFiltering property.

    Filtering options can be further enhanced by enabling the search case sensitivity. The case-sensitive icon can be turned on using the caseSensitiveIcon property so that end-users can control the case sensitivity.

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

    필터링 옵션

    The Ignite UI for React IgrCombo exposes one more filtering property that allows passing configuration of both FilterKey and CaseSensitive options. The FilterKey indicates which data source field should be used for filtering the list of options. The CaseSensitive option indicates if the filtering should be case-sensitive or not.

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

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

<IgrCombo filteringOptions={options} />

    Grouping

    Defining a groupKey option will group the items, according to the provided key:

    <IgrCombo groupKey="region" />

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

    정렬 방향

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

    <IgrCombo groupSorting="desc" />

    Label

    The IgrCombo label can be set easily using the label property:

    <IgrCombo label="Cities" />

    Placeholder

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

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

    Autofocus

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

    <IgrCombo autofocus={true} />

    Search Input Focus

    The ComboBox search input is focused by default. To disable this feature and move the focus to the list of options use the autofocusList property as shown below:

    <IgrCombo autofocusList={true} />

    Required

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

    <IgrCombo required={true} />

    Disable ComboBox

    You can disable the ComboBox using the disabled property:

    <IgrCombo disabled={true} />

    Additional Resources