Realtime table searching optimization

Realtime table searching optimization

I have developed a realtime table filter that works very well on small tables, but when you get table that has many rows it gets choppy.   It runs especially slow on older computers/browsers.  By looking at my code below, is there anything that can be done to make it speedier?  As a last resort, i considered using ajax to reach out to the server instead…

  1. //Start of document.ready     
  2. $(document).ready(function () {
  3. var selectedAccountGroup = $("#filter").val();
  4. var accountsTableData = $("table#" + selectedAccountGroup + " tbody").find('tr.searchable'); //Real-time Filter     
  5. $("#filter").keyup(function (e) {
  6. var currentFilter = $(this).val();
  7. var blankString = ""; //Run Optimized Search 
  8. searchValueOptimized(currentFilter);
  9. });

  11. function searchValueOptimized(currentFilter) {
  12. var rowCounter = 0;
  13. for(i = 0; i < accountsTableData.length; i++) {
  14. var $currentRow = accountsTableData.eq(i);
  15. var $cellsInRow = $currentRow.find('td');
  16. if($cellsInRow.text().search(new RegExp(currentFilter, "i")) < 0) {
  17. $currentRow.hide();
  18. } else {
  19. $currentRow.show(); //Set Even Row Colors     
  20. if(rowCounter % 2 == 0) {
  21. $cellsInRow.css("background-color", "#E6E6E6");
  22. } //Set Odd Row Colors
  23. else {
  24. $cellsInRow.css("background-color", "#FFFFFF");
  25. }
  26. rowCounter++;
  27. }
  28. }
  29. }
  30. });