Filtro de búsqueda de cuadrícula Web Components

    La función Filtro de búsqueda Ignite UI for Web Components en Web Components cuadrícula permite el proceso de búsqueda de valores en la recopilación de datos. Facilitamos la configuración de esta funcionalidad y se puede implementar con un cuadro de entrada de búsqueda, botones, navegación por teclado y otras características útiles para una experiencia de usuario aún mejor. Si bien los navegadores proporcionan de forma nativa la funcionalidad de búsqueda de contenido, la mayoría de las veces IgcGridComponent virtualiza sus columnas y filas que están fuera de la vista. En estos casos, la búsqueda nativa del navegador no puede buscar datos en las celdas virtualizadas, ya que no forman parte del DOM. Hemos ampliado la cuadrícula basada en tablas de Web Components Material con una API de búsqueda que le permite buscar a través del contenido virtualizado de la IgcGridComponent.

    Ejemplo de búsqueda Web Components

    El siguiente ejemplo representa IgcGridComponent con un cuadro de entrada de búsqueda que permite buscar en todas las columnas y filas, así como opciones de filtrado específicas para cada columna.

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Web Components Uso de la búsqueda

    Configuración de cuadrícula

    Comencemos creando nuestra cuadrícula y vinculándola a nuestros datos. ¡También agregaremos algunos estilos personalizados para los componentes que usaremos!

    .gridSize {
    --ig-size: var(--ig-size-small);
}
css
    <igc-grid id="grid1" class="gridSize" auto-generate="false" allow-filtering="true">
    <igc-column field="IndustrySector" data-type="string" sortable="true"></igc-column>
    <igc-column field="IndustryGroup" data-type="string" sortable="true"></igc-column>
    <igc-column field="SectorType" data-type="string" sortable="true"></igc-column>
    <igc-column field="KRD" data-type="number" sortable="true"></igc-column>
    <igc-column field="MarketNotion" data-type="number" sortable="true"></igc-column>
    <igc-column field="Date" data-type="date" sortable="true"></igc-column>
</igc-grid>
html

    ¡Genial, y ahora preparémonos para la API de búsqueda de nuestro IgcGridComponent! Podemos crear algunas propiedades, que se pueden usar para almacenar el texto buscado actualmente y si la búsqueda distingue entre mayúsculas y minúsculas y/o por coincidencia exacta.

        private grid: IgcGridComponent;    

    private searchBox: IgcInputComponent;
    
    private searchIcon: IgcIconComponent;
    private clearIcon: IgcIconComponent;
    private nextIconButton: IgcIconButtonComponent;
    private prevIconButton: IgcIconButtonComponent;

    private caseSensitiveChip: IgcChipComponent;
    private exactMatchChip: IgcChipComponent;
typescript

    Web Components Entrada del cuadro de búsqueda

    ¡Ahora creemos nuestra entrada de búsqueda! Al obtener el elemento de entrada podemos obtener su valor actual. Esto nos permitirá usar los métodos findNext y findPrev de IgcGridComponent para resaltar todas las apariciones de SearchText y desplazarnos al siguiente/anterior (dependiendo del método que hayamos invocado).

    Tanto el método findNext como el findPrev tienen tres argumentos:

    • Text: cadena (el texto que estamos buscando)
    • (opcional) CaseSensitive: booleano (si la búsqueda distingue entre mayúsculas y minúsculas o no, el valor predeterminado es falso)
    • (opcional) ExactMatch: booleano (si la búsqueda se realiza por coincidencia exacta o no, el valor predeterminado es falso)

    Al buscar por coincidencia exacta, la API de búsqueda resaltará como resultados solo los valores de celda que coincidan completamente con SearchText teniendo en cuenta también la distinción entre mayúsculas y minúsculas. Por ejemplo, las cadenas 'software' y 'Software' coinciden exactamente sin tener en cuenta la distinción entre mayúsculas y minúsculas.

    Los métodos anteriores devuelven un valor numérico (el número de veces que IgcGridComponent contiene la cadena dada).

    <igc-input id="searchBox" name="searchBox">
</igc-input>
html
    constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
    this.searchBox = document.getElementById('searchBox') as IgcInputComponent;
    grid.data = new MarketData();
}

public nextSearch(){
    this.grid.findNext(this.searchBox.value, false, false);
}
ts

    Agregar botones de búsqueda

    Para buscar y navegar libremente entre nuestros resultados de búsqueda, creemos un par de botones invocando los métodos findNext y findPrev dentro de los respectivos controladores de eventos de clic de los botones.

    <igc-icon-button id="prevIconBtn" variant="flat" name="prev" collection="material" ></igc-icon-button>
<igc-icon-button id="nextIconBtn" variant="flat" name="next" collection="material"></igc-icon-button>
html
    constructor() {
    var nextIconButton = document.getElementById('nextIconBtn') as IgcIconButtonComponent;
    var prevIconButton = document.getElementById('prevIconBtn') as IgcIconButtonComponent;
    nextIconButton.addEventListener("click", this.nextSearch);
    prevIconButton.addEventListener("click", this.prevSearch);
}
public prevSearch() {
    this.grid.findPrev(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
}

public nextSearch() {
    this.grid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
}
ts

    También podemos permitir que los usuarios naveguen por los resultados utilizando las teclas de flecha del teclado y la tecla Intro. Para lograr esto, podemos manejar el evento de pulsación de tecla de nuestra entrada de búsqueda evitando el movimiento del cursor predeterminado de la entrada con el método PreventDefault e invocando los métodos findNext / findPrev dependiendo de qué tecla haya presionado el usuario.

    <input id="searchBox" name="searchBox"/>
html
    constructor() {
     searchBox.addEventListener("keydown", (evt) => { this.onSearchKeydown(evt); });
     this.searchBox.addEventListener("igcInput", (evt) => {
        this.searchIcon.name = evt.detail ? 'clear' : 'search';
        this.grid.findNext(evt.detail, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
     });
}

public onSearchKeydown(evt: KeyboardEvent) {  
        if (evt.key === 'Enter' || evt.key === 'ArrowDown') {
            evt.preventDefault();
            this.grid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
        } else if (evt.key === 'ArrowUp') {
            evt.preventDefault();
            this.grid.findPrev(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
        }
    }
}
typescript

    Coincidencia exacta y sensible a mayúsculas y minúsculas

    Ahora permitamos que el usuario elija si la búsqueda debe distinguir entre mayúsculas y minúsculas y/o por una coincidencia exacta. Para este propósito, podemos usar entradas de casilla de verificación simples y vincularnos a su evento change donde podemos usar el estado de casilla checked.

    <span>Case sensitive</span>
<input id="case" type="checkbox">

<span>Exact match</span>
<input id="exact" type="checkbox">
html
    constructor() {
    const case = document.getElementById("case") as HTMLInputElement;
    const exact = document.getElementById("exact") as HTMLInputElement;
    case.addEventListener("change", this.updateSearch);
    exact.addEventListener("change", this.updateSearch);
}

public updateSearch() {
    const search1 = document.getElementById("search1") as HTMLInputElement;
    const case = document.getElementById("case") as HTMLInputElement;
    const exact = document.getElementById("exact") as HTMLInputElement;
    const grid = document.getElementById("grid") as IgcGridComponent;
    grid.findNext(search1.value, case.checked, exact.checked);
}
typescript

    Persistencia

    ¿Qué pasa si quisiéramos filtrar y ordenar nuestros IgcGridComponent ¿O incluso para agregar y eliminar registros? Después de tales operaciones, los aspectos más destacados de nuestra búsqueda actual se actualizan automáticamente y persisten sobre cualquier texto que coincida con el SearchText! Además, la búsqueda funcionará con paginación y persistirá los aspectos más destacados a través de cambios en el IgcGridComponent 's PerPage propiedad.

    Agregar íconos

    Al utilizar algunos de nuestros otros componentes, podemos crear una interfaz de usuario enriquecida y mejorar el diseño general de toda nuestra barra de búsqueda. Podemos tener un bonito icono de búsqueda o eliminación a la izquierda de la entrada de búsqueda, un par de chips para nuestras opciones de búsqueda y algunos iconos de diseño de materiales combinados con bonitos botones de estilo ondulado para nuestra navegación a la derecha. Podemos envolver estos componentes dentro de un grupo de entrada para un diseño más refinado.

    import { defineComponents, IgcInputComponent, IgcChipComponent, IgcIconComponent, IgcIconButtonComponent, registerIconFromText } from "igniteui-webcomponents";

defineComponents(IgcInputComponent, IgcChipComponent, IgcIconComponent, IgcIconButtonComponent);
typescript

    Finalmente, ¡actualicemos nuestra plantilla con los nuevos componentes!

    <igc-input id="searchBox" name="searchBox">
    <igc-icon id="searchIcon" slot="prefix" name="search" collection="material"></igc-icon>
    <div slot="suffix">
        <igc-chip selectable="true" id="caseSensitiveChip">Case Sensitive</igc-chip>
        <igc-chip selectable="true" id="exactMatchChip">Exact Match</igc-chip>
    </div>
    <div slot="suffix">
        <igc-icon-button id="prevIconBtn" variant="flat" name="prev" collection="material" ></igc-icon-button>
        <igc-icon-button id="nextIconBtn" variant="flat" name="next" collection="material"></igc-icon-button>
    </div>
</igc-input>
html
    constructor() {
    const prevIconText = "<svg width='24' height='24' viewBox='0 0 24 24'><path d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'></path></svg>";
    const nextIconText = "<svg width='24' height='24' viewBox='0 0 24 24'><path d='M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'></path></svg>";
    const clearIconText = "<svg width='24' height='24' viewBox='0 0 24 24' title='Clear'><path d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'></path></svg>";
    const searchIconText = "<svg width='24' height='24' viewBox='0 0 24 24'><path d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z' /></svg>";

    registerIconFromText("prev", prevIconText, "material");
    registerIconFromText("next", nextIconText, "material");
    registerIconFromText("clear", clearIconText, "material");
    registerIconFromText("search", searchIconText, "material");
}
typescript

    A la derecha de nuestro grupo de entrada, creemos tres contenedores separados con los siguientes propósitos:

    • Para mostrar un par de chips que alternan las propiedades CaseSensitive y ExactMatch. Hemos reemplazado las casillas de verificación con dos chips elegantes que cambian de color según estas propiedades. Cada vez que se hace clic en un chip, invocamos su respectivo controlador.
    <div slot="suffix">
    <igc-chip selectable="true" id="caseSensitiveChip">Case Sensitive</igc-chip>
    <igc-chip selectable="true" id="exactMatchChip">Exact Match</igc-chip>
</div>
html
    constructor() {
    const input = document.getElementById("searchBox") as IgcInputComponent;
    input.addEventListener("change", this.updateSearch);
}
public updateSearch() {
    const grid = document.getElementById('grid') as IgcGridComponent;
    const caseSensitiveChip = document.getElementById('caseSensitiveChip') as IgcChipComponent;
    const exactMatchChip = document.getElementById('exactMatchChip') as IgcChipComponent;
    grid.findNext(input.value, caseSensitiveChip.selected, exactMatchChip.selected);
}
ts
    • Para los botones de navegación de búsqueda, hemos transformado nuestras entradas en botones de estilo ondulado con íconos de materiales. Los controladores para los eventos de clic siguen siendo los mismos: invocando los métodos findNext / findPrev.
    <div slot="suffix">
    <igc-icon-button id="prevIconBtn" variant="flat" name="prev" collection="material" ></igc-icon-button>
    <igc-icon-button id="nextIconBtn" variant="flat" name="next" collection="material"></igc-icon-button>
</div>
html
    constructor() {
    const nextIconButton = this.nextIconButton = document.getElementById('nextIconBtn') as IgcIconButtonComponent;
    const prevIconButton = this.prevIconButton = document.getElementById('prevIconBtn') as IgcIconButtonComponent;
    nextIconButton.addEventListener("click", this.nextSearch);
    prevIconButton.addEventListener("click", this.prevSearch);
}
typescript
    public nextSearch() {
    this.grid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
}

public prevSearch() {
    this.grid.findPrev(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
}
ts
    Ignite UI for Web Components | CTA Banner

    Limitaciones conocidas

    Limitación Descripción
    Buscando en celdas con una plantilla Las funciones destacadas de búsqueda funcionan solo para las plantillas de celda predeterminadas. Si tiene una columna con una plantilla de celda personalizada, los resaltados no funcionarán, por lo que deberá utilizar enfoques alternativos, como un formateador de columnas, o configurar elsearchable propiedad en la columna a falso.
    Virtualización remota La búsqueda no funcionará correctamente al utilizar la virtualización remota
    Celdas con texto cortado Cuando el texto en la celda es demasiado grande para caber y el texto que estamos buscando está cortado por los puntos suspensivos, aún nos desplazaremos hasta la celda y la incluiremos en el recuento de coincidencias, pero no se resaltará nada.

    Referencias de API

    En este artículo, implementamos nuestra propia barra de búsqueda con algunas funciones adicionales cuando IgcGridComponent se trata de navegar entre los resultados de búsqueda. También usamos algunos componentes Ignite UI for Web Components adicionales como íconos, chips y entradas. La API de búsqueda se enumera a continuación.

    IgcGridComponent methods:

    IgcColumnComponent properties:

    Componentes adicionales con API relativas que se utilizaron:

    Recursos adicionales

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.