Incremental Search of HTML Table with Highlighting

https://jftuga.github.io/blog/javascript/programming/2020/09/21/Incremental-Search-of-HTML-Table-with-Highlighting.html

by jftuga

HTML

<!-- based off of: https://jsfiddle.net/bc_rikko/67ovedcm/ 
     
     Some intersting searches:
     an
     Be
     be.*acc
     HR
     HR|Ops
     0001
     8-
     000[^1]
     be.*01.*acct
     
See also: https://jftuga.github.io/blog/javascript/programming/2020/09/21/Incremental-Search-of-HTML-Table-with-Highlighting.html

-->

<b>Search:</b> <input type='text' id="keyword"> &nbsp;<font size="-1"><i>(This search only works in Chrome and Firefox, but you can press Ctrl-F to search with Internet Explorer)</i></font>
<ul id="list">
</ul>
<br />

<TABLE id="dataTable" border="1" cellspacing="3" cellpadding="3">
  <THEAD>
    <TH>Name</TH>
    <TH>Number</TH>
    <TH>Department</TH>
  </THEAD>
</TABLE>

JavaScript

var data = ["Bean, Andrea;9-0001;Acct", "Berman, Ash;8-0002;HR", "Decker, Ashley;8-0001;HR", "Denton, Andy;9-0003;Ops", "Hunt, Ethan;8-0003;Ops", "Hunter, Annabel;9-0002;Acct"];


function clearTable(table) {
  for (var i = table.rows.length - 1; i > 0; i--) {
    table.deleteRow(i);
  }
}

function buildCell(row, entry, searchQuery) {
  var cell = row.insertCell(-1);
  highlight = new RegExp(searchQuery, "i");

  if (searchQuery) {
    cell.innerHTML = entry.replace(highlight, "<mark>" + "$&" + "</mark>");
  } else {
    cell.appendChild(document.createTextNode(entry));
  }
}

function buildTable(tableID, data, searchQuery) {
  var table = document.getElementById(tableID);
  clearTable(table)
  for (i = 0; i < data.length; i++) {
    var row = table.insertRow(-1);
    slots = data[i].split(";");
    for (j = 0; j < 3; j++) {
      buildCell(row, slots[j], searchQuery);
    }
  }
}

buildTable("dataTable", data, "")

var keyupStack = [];
var keyword = document.getElementById('keyword');
keyword.addEventListener('keyup', function() {
  keyupStack.push(1);

  setTimeout(function() {
    keyupStack.pop();
    if (keyupStack.length === 0) {
      var buf = '.*?' + this.value.replace(/(.)/g, "$1");
      var reg = new RegExp(buf, 'i');

      var filteredLists = data.filter(function(d) {
        return reg.test(d);
      });

      buildTable("dataTable", filteredLists, this.value);
    }
  }.bind(this), 300);
});