I am trying to generate a table from an array with a searching feature. With every letter typed in the search bar the items that contain that specific string will be displayed.

I have come to the conclusion to generate the whole table with every keystroke rather than editing the current.

This is where I am at:

What´s currently typed in the searchbar:

  let searchBar = document.getElementById('search-input');

    let value = " ";
    searchBar.addEventListener(`keyup`, function(){
        value = this.value

How I make the table:

let tableUsers = document.getElementById("tabell");

function drawTable() {
    let table = document.createElement("table");
    let tableHead = document.createElement("thead");
    let colHeads = ["Name"];

    for (let header of colHeads) {
        let cell = document.createElement("th")
        cell.innerHTML = header;
        tableHead.appendChild(cell);
    }
    table.appendChild(tableHead)

    for (let x of people) {

        let row = document.createElement("tr");

        let name = document.createElement("td");
        name.innerHTML = x.name.first + "&nbsp" + x.name.last;
        row.appendChild(name);

        table.appendChild(row);
    }

    tableUsers.appendChild(table);
}
drawTable()

I am trying this:

let str = x.name.first.toLowerCase()

        if (str.includes(value)){
        //code
        }

Is it possible to do it this way? Or possible at all using JS and large arrays without using a lot of pc resources? Any help is greatly appreciated!