ZingGrid: Adding Custom Search Functionality

External Search Input

Adding an external search input is easy. You just need two two things.

1. An external input field

<input type="search" id="searchGrid">

2) Our API method searchGrid() hooked up to that input field.

// element references  
const searchGrid = document.getElementById('searchGrid');  
const zgRef = document.querySelector('zing-grid');  

// debounce search  let searchTimeoutId = null;  

// function declarations  
function _searchGrid(e) {    // debounce search    clearTimeout(searchTimeoutId);    
  let targetValue = e.target.value;    
  // delay 100 milliseconds to debounce user input   
  searchTimeoutId = setTimeout((userInput) => {          
  requestAnimationFrame(() => zgRef.searchGrid(userInput));    
 }, 100, targetValue);  
}   

// add event listeners  
searchGrid.addEventListener('keyup', _searchGrid); searchGrid.addEventListener('change', _searchGrid); searchGrid.addEventListener('search', _searchGrid);

Demo link here 🔗 

Apply Search to Column Subset

You can apply search to a column subset by adding the search="false" attribute to each zg-column . You must define the columns you do not want search enabled on.

<!-- excluded columns from search -->

<zg-column index="img" search="disabled"></zg-column>

Demo link here 🔗 

Related Resources

1. Api method filterColumn  - https://www.zinggrid.com/docs/api-methods#Search

2. Filter features - https://www.zinggrid.com/docs/features/filtering