Web Components ComboBox Features

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

    Combobox Features Example

    La siguiente demostración muestra algunas funciones ComboBox que se habilitan/deshabilitan en tiempo de ejecución:

    En nuestro ejemplo vamos a utilizar el componente IgcSwitchComponent, por lo que debemos registrarlo 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 la agrupación se habilita/deshabilita configurando la propiedad groupKey en un campo de 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

    De forma predeterminada, el filtrado en ComboBox está habilitado. Se puede desactivar configurando la propiedad disableFiltering.

    Las opciones de filtrado se pueden mejorar aún más habilitando la búsqueda entre mayúsculas y minúsculas. El icono que distingue entre mayúsculas y minúsculas se puede activar mediante la propiedad caseSensitiveIcon para que los usuarios finales puedan controlar la distinción entre mayúsculas y minúsculas.

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

    Opciones de filtrado

    El componente ComboBox Ignite UI for Web Components expone una propiedad de filtrado más que permite pasar la configuración de las opciones FilterKey y CaseSensitive. FilterKey indica qué campo de fuente de datos se debe utilizar para filtrar la lista de opciones. La opción CaseSensitive indica si el filtrado debe distinguir entre mayúsculas y 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

    La definición de una opción groupKey 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

    La etiqueta IgcComboComponent se puede configurar fácilmente usando la propiedad label:

    <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 está enfocada de forma predeterminada. Para deshabilitar esta función y mover el foco a la lista de opciones, use la propiedad autofocusList como 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

    Puede desactivar el ComboBox utilizando la propiedad disabled:

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

    API Reference

    Additional Resources