Auto search when typing

Question

Hi,I am trying to implement the search while typing in search box. As a reference I saw the post https://www.syncfusion.com/forums/146626/how-to-make-search-filter-to-apply-when-typing that is exacly what I am looking for, but I am using javascript ES5. Is there any clue for this request?RegardsAnselmo Marthins

Rajapandiyan Settu · Accepted Answer

Hi Anselmo, 

Thanks for contacting Syncfusion support. 

Query: I am trying to implement the search while typing in search box.  

We have analyzed your query and prepared a sample  “searching automatically while typing in the search box” by using Javascript ES5. Find the below code example and sample for your reference. 

Sample: https://stackblitz.com/edit/5qd6dr-5h7qtg?file=index.js  






[index.js] 
var grid = new ej.grids.Grid({ 
  dataSource: window.hierarchyOrderdata, 
  toolbar: ["Search"], 
  ----- 
  dataBound: dataBound, 
  ---- 
}); 
grid.appendTo("#Grid"); 
 
function dataBound(args) { 
// get the search bar element and bind the keyup event 
  this.element.querySelector("#" + this.element.getAttribute("id") + "_searchbar .addEventListener("keyup", function(e) { 
      setTimeout( 
        () => this.closest(".e-grid").ej2_instances[0].search(this.value), 
        1500); // perform search operation in Grid after certain time  interval for avoid multiple request and you can change based on your application  
      }); 
  } 

In the above code example, we bind the keyup event to the Grid’s search input element using its id. 
This event is triggered when type the Grid search box and performed the search operation with ‘search()’ method after the certain time interval using setTimeout()(because need to avoid send the request in each character typing).  

Search: https://ej2.syncfusion.com/javascript/documentation/api/grid/#search  

Please get back to us if you need further assistance with this. 

Regards, 
Rajapandiyan S

Anselmo Marthins de · Answer

Exactly what I was looking for! It works perfectly.Thanks!Anselmo

Rajapandiyan Settu · Answer

Hi Anselmo, 

We are glad that the provided solution resolved your requirement. 
 
Regards, 
Rajapandiyan S