Auto search when typing

[Anselmo Marthins de]

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?

Regards

Anselmo Marthins

[Rajapandiyan Settu]

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]

Exactly what I was looking for! It works perfectly.

Thanks!

Anselmo

[Rajapandiyan Settu]

Hi Anselmo, 

We are glad that the provided solution resolved your requirement. 

 

Regards, 

Rajapandiyan S