Web Components ComboBox Features

    El componente ComboBox Ignite UI for Web Components expone varias características, como el filtrado y la agrupación.

    Combobox Features Example

    La siguiente demostración muestra algunasIgcComboComponent funciones que están habilitadas o desactivadas en tiempo de ejecución:

    En nuestra muestra vamos a usar elIgcSwitchComponent componente, así que tenemos que importarlos junto con el combo:

    import { defineComponents, IgcComboComponent, IgcSwitchComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcComboComponent, IgcSwitchComponent);

    let combo = document.getElementById('combo') as IgcComboComponent<City>;

let switchIcon = document.getElementById('caseSensitive') as IgcSwitchComponent;
let switchFilter = document.getElementById('filtering') as IgcSwitchComponent;
let switchDisable = document.getElementById('disabled') as IgcSwitchComponent;

switchIcon.addEventListener("igcChange", () => {
    combo.caseSensitiveIcon = switchIcon.checked;
});

switchFilter.addEventListener("igcChange", () => {
    combo.disableFiltering = switchIcon.disabled = switchFilter.checked;
});

switchDisable.addEventListener("igcChange", () => {
    combo.disabled = switchDisable.checked;
});

    Tenga en cuenta que el agrupamiento está habilitado/desactivado estableciendo lagroupKey propiedad en un campo fuente de datos correspondiente:

    let switchGroup = document.getElementById('grouping') as IgcSwitchComponent;

switchGroup.addEventListener("igcChange", () => {
    this.combo.groupKey = switchGroup.checked ? "country" : undefined;
});

    Características

    Filtración

    Por defecto, el filtrado en el ComboBox está activado. Se puede desactivar configurando ladisableFiltering propiedad.

    Las opciones de filtrado pueden mejorarse aún más activando la sensibilidad de mayúsculas y minúsculas de búsqueda. El icono sensible a mayúsculas minúsculas puede activarse usando estacaseSensitiveIcon propiedad para que los usuarios finales puedan controlar la sensibilidad a mayúsculas y minúsculas.

    <igc-combo disable-filtering case-sensitive-icon></igc-combo>

    Opciones de filtrado

    El Ignite UI for Web ComponentsIgcComboComponent expone una propiedad de filtrado más que permite pasar la configuración de ambasFilterKey opciones yCaseSensitive. IndicaFilterKey qué campo fuente de datos debe usarse para filtrar la lista de opciones. LaCaseSensitive opción indica si el filtrado debe ser sensible a mayúsculas minúsculas o no.

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

combo.filteringOptions = options;

    Grouping

    Definir unagroupKey opción agrupará los elementos, según la clave proporcionada:

    <igc-combo group-key="region"></igc-combo>

    [!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:

    <igc-combo group-sorting="desc"></igc-combo>

    Label

    LaIgcComboComponent etiqueta puede establecerse fácilmente usando lalabel propiedad:

    <igc-combo label="Cities"></igc-combo>

    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:

    <igc-combo placeholder="Pick a city" placeholder-search="Search for a city"></igc-combo>

    Autofocus

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

    <igc-combo autofocus></igc-combo>

    Search Input Focus

    La entrada de búsqueda de ComboBox se enfoca por defecto. Para desactivar esta función y mover el foco a la lista de opciones, utilice laautofocusList propiedad que se muestra a continuación:

    <igc-combo autofocus-list></igc-combo>

    Required

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

    <igc-combo required></igc-combo>

    Disable ComboBox

    Puedes desactivar el ComboBox usando ladisabled propiedad:

    <igc-combo disabled></igc-combo>

    API Reference

    Additional Resources