Replacing a long HTML dropdown list with live search

Question

I have a working PHP & Mongodb site. Currently when this page loads, it pulls the names of the people from the DB. This list now is too long, a few hundred!

I have been following the guide posted here with a standard implementation for "live search". It echo's out the "product name" ONLY.

https://www.mywebtuts.com/blog/php-live-mysql-database-search-example

But I cannot get it to work as a drop-in replacement. I think it is because of the differences with the backends?

I have changed the backend-search.php file to:

<?php

    if (session_status() == PHP_SESSION_NONE) {
        session_start();
    }

    require_once __DIR__ . '/vendor/autoload.php';
    //include './inc/functions.php';
    
    if(isset($_REQUEST["term"])){
       
        $client = new MongoDB\Client($_ENV['MDB_CLIENT']);
        
        $collection = $client->golf->player;
        
        $param_term = $_REQUEST["term"];

        $filter = ['name' => ['$regex' => $param_term]];
        $options = ['sort' => ['name' => 1] ];

        $cursor = $collection->find($filter, $options);

        $players = [];
        foreach ($cursor as $player) {
            echo "<p>".$player."</p>";
        }

    }

?>

Is there a simple way to implement this live search from the existing returned PHP variable I used - rather the alternative search method?

<select class="form-control" name="playerId" id="playerId" onchange="selectPlayer(this.value)">
   <option value="default" selected>Select Name</option>
   <?php
        foreach ($players as $player) {
            echo "<option value=".$player['_id'].">".$player['name']."</option>";
        }
   ?>
</select>

How do I change the JS or PHP for this?