I asked for advice for how to implement a change a HTML form with a <select> element filled from a database call that is now has too many items. This is PHP-based. The suggestion was to use a JS library, and specifically Specialize.js.

But I cannot get any functionality to work! Please help correct my stupid mistakes and / or noviceness...

<?php

     require_once __DIR__ . '/vendor/autoload.php';
     include './inc/functions.php';

     $players = getPlayers(); // RETURNS ID & NAME

     include_once './inc/header.php';
 ?>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.5/js/selectize.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.5/css/selectize.bootstrap5.min.css" />

<script type='text/javascript'>
    var jsPlayers = <?php echo json_encode($players); ?>;
</script>

<form action="/scoreRound" method="post" class="form" role="form" name="addRoundForm" id="addRoundForm" autocomplete="on">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3 text-center">
                <h6>Select Player</h6>    
                <select class="form-control" name="playerId" id="playerId" onchange="selectPlayer(this.value)">
      <!-- 
                    THIS IS TO REPLACE - BUT SHOWING ORIGINAL PHP-BASED CODE
                    <option value="default" selected>Select Name</option>
                    <?php
                        foreach ($players as $player) {
                            echo "<option value=".$player['_id'].">".$player['name']."</option>";
                        }
                    ?>
       -->
                </select>
            </div>
        </div>
   </div>

   <!-- THERE ARE MORE ROWS AND HTML FIELDS FOR USER ENTRY -->

</form>

<script>

    $("#playerId").selectize({
        create: true,
        options: [
            // THIS SHOULD ACTUALLY BE THE $players or `jsPlayers` array
            {value: 1, name: "Dan"},
            {value: 2, name "Aaron"}
        ]
        placeholder: "Start typing name...",
        onChange(value) {
            console.log(value);
        }
    });

</script>