Create search box in modal Bootstrap

Question

I wonder if it is possible to create a modal window to search for information and select it for a form. For example, when you click on the magnifying glass open a modal with all the individuals (list coming from a SELECT of the database) so that you can search by name and select it, and when you select, import the CPF so that the name is automatically loaded (that part of the name being imported did not, but I believe it has no problems). So it would also be for sector and position... Following images to view better:

Page for registration:

Example of the window I want to open:

Is it possible to do this or does modal not allow this type of interaction? Note: I was able to send the search table (person, sector, etc.) but I cannot instantiate class or import file to process data...

It’s code, it’s incomplete, but just in case:

Cuteness

<form method="POST" action="<?php echo host; ?>controller/processa_cad_colab">
    <div class="form-row">
        <div class="form-group col-md-3">
            <label for="nome-fantasia">CPF ou Código:</label>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <button type="submit" class="btn btn-light border text-muted" type="button" id="button-addon1" name="proc-pessoa" data-toggle="modal" data-target="#exampleModal" data-whatever="pessoa_fisica"><span class="fas fa-search"></span></button>
                </div>
                <input type="number" class="form-control" id="nome-fantasia" name="apelido" aria-describedby="basic-addon1" maxlength="11">
            </div>
        </div>
        <div class="form-group col-md-6">
            <fieldset disabled>
                <label for="nome-completo">Nome:</label>
                <input type="text" class="form-control font-weigh-bolder" name="nome-completo" id="nome-completo" maxlength="220" required="" value="">
            </fieldset>                            
        </div> 
        <div class="form-group col-md-3">
            <label for="genero">Situação:</label>
            <select class="custom-select" required="" name="genero" id="genero">
                <option checked="" class="text-muted"></option>
                <option value="0">Inativo</option>
                <option value="1">Ativo</option>
                <option value="2">Em análise</option>
                <option value="3">Demitido</option>
            </select>
        </div> 
    </div>
    <div class="form-row">
        <div class="form-group col-md-2">
            <label for="nome-fantasia">Código setor:</label>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <button class="btn btn-light border text-muted" type="button" id="button-addon1"><span class="fas fa-search"></span></button>
                </div>
                <input type="number" class="form-control" id="nome-fantasia" name="apelido" aria-describedby="basic-addon1" maxlength="11">
            </div>
        </div>
        <div class="form-group col-md-4">
            <fieldset disabled>
                <label for="nome-completo">Setor:</label>
                <input type="text" class="form-control font-weigh-bolder" name="nome-completo" id="nome-completo" maxlength="220" required="" value="">
            </fieldset>                            
        </div><div class="form-group col-md-2">
            <label for="nome-fantasia">Código cargo:</label>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <button class="btn btn-light border text-muted" type="button" id="button-addon1"><span class="fas fa-search"></span></button>
                </div>
                <input type="number" class="form-control" id="nome-fantasia" name="apelido" aria-describedby="basic-addon1" maxlength="11">
            </div>
        </div>
        <div class="form-group col-md-4">
            <fieldset disabled>
                <label for="nome-completo">Cargo:</label>
                <input type="text" class="form-control font-weigh-bolder" name="nome-completo" id="nome-completo" maxlength="220" required="" value="">
            </fieldset>                            
        </div>                         
    </div>                    
    <div class="form-row">
        <div class="form-group col-md-4">
            <label for="email-pessoal">E-mail Pessoal:</label>
            <input type="email" class="form-control" name="email" id="email-pessoal" placeholder="user@server" maxlength="220">
        </div>
        <div class="form-group col-md-4">
            <label for="telefone">Telefone:</label>
            <input type="text" class="form-control" name="telefone" id="telefone" placeholder="DDD + número (apenas números)" minlength="10"  maxlength="50">
        </div>
        <div class="form-group col-md-4">
            <label for="celular">Celular:</label>
            <input type="text" class="form-control" name="celular" id="celular" placeholder="DDD + número (apenas números)" minlength="10" maxlength="50">
        </div>
    </div>
    <div class="form-row justify-content-center mt-4">
        <div class="form-group  col-md-4 mt-2">                            
            <button type="button" class="form-control btn btn-success" data-toggle="modal" data-target="#confirm-cadastro">Cadastrar</button>
        </div>
        <div class="form-group  col-md-4 mt-2">
            <input type="reset" class="form-control btn btn-secondary" value="Limpar dados">
        </div>
    </div>

    <!-- modal para confirmar cadastro -->
    <div class="modal fade" id="confirm-cadastro" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-info">
                    <h5 class="modal-title text-white" id="exampleModalLabel"><span class="fas fa-exclamation-triangle"></span>&nbsp;&nbsp;Alerta!</h5>
                </div>
                <div class="modal-body">
                    Confirma registro dos dados?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal"><span class="fas fa-times-circle"></span>&nbsp;Cancelar</button>                                    
                    <button type="submit" class="btn btn-success" name="cadastrar-pf"><span class="fas fa-check-circle"></span>&nbsp;Confirmar</button>
                </div>
            </div>
        </div>
    </div>
</form>

Modal with JS:

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Pesquiasr</h5>
            </div>
            <div class="modal-body">                       
                <form method="POST" action="">
                    <div class="form-row justify-content-center">
                        <div class="form-group">
                            <div class="input-group">
                                <input type="text" class="form-control" name="cx-pesq-colab" placeholder="Busca por nome">
                                <div class="input-group-prepend">
                                    <button type="submit" class="btn btn-primary" type="submit"><span class="fas fa-search"></span></button>
                                </div>                                        
                            </div>
                        </div>                                    
                    </div>
                </form>
                <?php
                $tabela = "<span class='tabela-proc'></span>";
                $busca = filter_input(INPUT_POST, 'pesq-colab', FILTER_SANITIZE_STRING);
                if (isset($busca)) {
                    echo "Busca";
                }
                ?>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Send message</button>
            </div>
        </div>
    </div>
</div>

<script>
    $('#exampleModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var recipient = button.data('whatever');
        var modal = $(this);
        if (recipient == "pessoa_fisica") {
            modal.find('.modal-title').text('Pesquisar por Pessoa Física ');
            modal.find('.tabela-proc').text('pessoa_fisica');
        }
    });
</script>