paad/import/periodo.php

<!-- <script src="js/jquery.min.js"></script> -->
<?
$user or die("Error: no se pudo cargar el usuario");
?>
<form action="action/action_periodousuario_update.php" method="post" id="formaPeriodo" class="marco">
    <div class="row">
        <div class="col-12">
            <?php
            $target = $target ?? strtok($_SERVER["REQUEST_URI"], '?');
            $niveles = $db
                ->orderBy('nivel_nombre')
                ->get("nivel");

            // collect facultad_id's with facultad from $periodos
            ?>
            <input type="hidden" name="target" value="<?= $target ?>">
            <div class="form-box">
                <div class="form-group row">
                    <label for="periodo" class="col-4 col-form-label">Cambiar de periodo</label>
                    <div class="col-6">
                        <div id="dlPeriodo" class="datalist datalist-select mb-1 w-100">
                            <div class="datalist-input">
                                Selecciona un periodo
                            </div>
                            <span class="icono ing-buscar"></span>
                            <ul style="display:none">
                                <?php
                                foreach ($niveles as $nivel) {
                                    ?>
                                    <li data-id="<?= $nivel['nivel_id'] ?>" class="not-selectable disable">
                                        <?= $nivel['nivel_nombre'] ?>
                                    </li>
                                    <?
                                    $periodos_rs = $db->query('SELECT periodo_id, periodo_nombre FROM PERIODO_VIEW
                                        WHERE 
                                            nivel_id = :nivel_id AND
                                            (facultad_id = :facultad_id OR :facultad_id IS NULL)
                                        GROUP BY periodo_id, periodo_nombre, periodo_fecha_inicio
                                        ORDER BY periodo_fecha_inicio DESC',
                                        [
                                            ':nivel_id' => $nivel['nivel_id'],
                                            ':facultad_id' => $user->facultad['facultad_id']
                                        ]
                                    );
                                    array_walk($periodos_rs, function ($per) {
                                        global $user;
                                        ?>
                                        <li data-id="<?= $per['periodo_id'] ?>" <?php if ($user->periodo_id == $per["periodo_id"]) {
                                              echo 'class="selected"';
                                          } ?>>
                                            <?= $per['periodo_nombre'] ?>
                                        </li>
                                    <?php }); ?>
                                <?php } ?>
                            </ul>
                            <input type="hidden" id="periodo" name="id" value="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<script src="./js/datalist.js"></script>
<script>
    setDatalist('#periodo', <?= $user->periodo_id; ?>)
    makeRequiredDatalist("#periodo", true);

    $(document).on('click', '#dlPeriodo ul li:not(.not-selectable)', function () {
        setTimeout(() => $('form#formaPeriodo').submit(), 0);
    });
</script>