React ComboBox Features

El componente Ignite UI for React ComboBox expone varias funciones como filtrado y agrupación.

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';

Luego, usando el gancho useState de React, declararemos nuestras variables que se actualizarán cuando cambie el estado de los interruptores. Esto hará un seguimiento de las actualizaciones y reflejará los cambios en las entradas del combo en consecuencia:

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}

Características

Filtración

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>

Opciones de filtrado

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.

El siguiente fragmento de código muestra cómo filtrar las ciudades de nuestra fuente de datos por país en lugar de por nombre. También estamos haciendo que el filtrado distinga entre mayúsculas y minúsculas de forma predeterminada:

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.

Dirección de clasificación

El componente ComboBox también expone una opción para establecer si los grupos deben ordenarse en orden ascendente o descendente. De forma predeterminada, el orden de clasificación es ascendente:

<IgrCombo groupSorting="desc" />

Label

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

<IgrCombo label="Cities" />

Placeholder

Se puede especificar un texto de marcador de posición tanto para la entrada del componente ComboBox como para la entrada de búsqueda ubicada dentro del menú desplegable:

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

Autofocus

Si desea que su ComboBox se centre automáticamente en la carga de la página, puede utilizar el siguiente código:

<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

El ComboBox se puede marcar como requerido estableciendo la propiedad requerida.

<IgrCombo required={true} />

Disable ComboBox

You can disable the ComboBox using the disabled property:

<IgrCombo disabled={true} />