Run search algorithm in the front end instead of the back end

So I just started working on my first web app and i want to know if this would be possible to do

i have to populate a table based on the search results, so i created a search function & i am using express and handlebars as the template engine

Search function

<script>
document.getElementById('search_masterTable').addEventListener('input',()=>{
    const result_array = accounts_array.filter(function(r){
        return value.every(function(word){
            console.log(word)
            return column_name_array.some(function(colIndex){
                if(r[colIndex] == null){
                    return false
                }else{
                    return r[colIndex].toString().toUpperCase().indexOf(word) !== -1
                }
            });
        });
    })
})
</script>

which takes input from the html

HTML

<div class="FieldElement2" style="margin-top: 3%;">
    <div class="input-field ">
        <input id="search_masterTable" type="text" class="validate">
    </div>

        <table class="highlight centered responsive-table" style="width: min-content;" >
            <thead>
                <tr>                    
                <th></th>
                <th>Ledg.No.</th>
                <th>File No.</th>
                <th>Name</th>
                <th>Phone</th>
                </tr>
            </thead>
            <tbody id="searchResultsBody">
            {{#each accounts_array}}
                <tr>
                    <td><button class="viewButton">View Chart</button></td>
                    <td class="Ledg_No" scope="row">{{ledger_num}}</td>
                    <td class="File_Num" scope="row">{{file_num}}</td>
                    <td class="Name">{{client_name}}</td>
                    <td class="gPhoneNumber3">{{phone_number6}}</td>
                </tr>
            {{/each}}
            </tbody>
        </table>
</div>

SO i am running this => {{#each accounts_array}} to populate my table but i have to run the search function every time the user enters a value (on input ) and populate the table based on the result_array of the search

BACK END

router.get('/masterTable/:id', ensureAuth, async (req, res) => {

    const title = 'Master Table'
    var account = parseInt(req.params.id) 
    db.query(`SELECT * FROM mt_`+account+``, async (err,accounts_array) => {

        res.render('masterTable', {
            accounts_array,
            title
        })

    })
})

SO basically all i am trying or willing to do is after the user inputs value in the input field i want to run the search function in the front end and populate the table with the results this is the problem i am facing i dont know how to access the accounts_array the third line in the search function

const result_array = accounts_array.filter(function(r){....})

show an error ReferenceError: accounts_array is not defined

can some one please help me out i dont know what to do