How to search the records in grid on each keystroke?

This article explains how to search the records in the grid on each keystroke.

Solution

In JavaScript Grid, the search action is handled by the Search item of the toolbar. By default, pressing the Enter key starts the search action.

To override the default behavior of the search action, we are implementing a search feature on keystrokes. On each keystroke (over the input element), a certain time interval (using debouncing) is applied to search the Grid. Using the event delegation concept, you can handle the keydown event for the input textbox (Search item).

Define the Grid

Define the Grid with the load event,where you can bind the keydown event for the Grid.

 
import { Grid, Page, Selection, Toolbar } from '@syncfusion/ej2-grids';
import { categoryData } from './data-source';
 
Grid.Inject(Page, Selection, Toolbar);
 
let grid: Grid = new Grid(
    {
        dataSource: categoryData,
        allowPaging: true,
        toolbar: ['Search'],
        load: onLoad,
        columns: [
            { field: 'CategoryName', headerText: 'Category Name', width: 160 },
            { field: 'ProductName', headerText: 'Product Name', width: 170 },
            { field: 'QuantityPerUnit', headerText: 'Quantity Per Unit', width: 170, textAlign: 'Right' },
            { field: 'UnitsInStock', headerText: 'Units In Stock', width: 170, textAlign: 'Right' },
            {
                field: 'Discontinued', headerText: 'Discontinued', width: 150,
                textAlign: 'Center', displayAsCheckBox: true, type: 'boolean'
            }
        ],
        pageSettings: { pageCount: 5 }
    });
grid.appendTo('#Grid');
 
 

In the Keydown listener, the search action has been handled using the search method of the Grid.

// debouncing method

const debounce = (func, delay) => {

    let debounceTimer

    return function () {

        const context = this;

        const args = arguments;

        clearTimeout(debounceTimer);

        debounceTimer = setTimeout(() => func.apply(context, args), delay)

    }

}

 

const onLoad = () => {

    // event delegation concept

    // debouncing concept

    grid.element.addEventListener('keydown', debounce((e) => {

        if (e.target.getAttribute('id').indexOf('_searchbar') !== - 1) {

            grid.search((e.target as HTMLInputElement).value);

        }

    }, 250));

}

Output: 

                          Figure 1: Grid with the searched records

Typescript demo: https://stackblitz.com/edit/5g89yd-xhbewq?file=index.ts

Angular Demo: https://stackblitz.com/edit/angular-yta9sj?file=app.component.ts

React Demo: https://stackblitz.com/edit/react-hhbfey?file=index.js