Auto-Complete with database values in input text type

Question

Good evening, I need a code that when entering the input the user will see suggestions below that should be the values pulled from the bank.

<input type="text" id="pesquisa" name="pesquisa">

Answer 1

Hello, some time ago I had the same doubt ... but I did not want to use libraries to do this kind of research, after a while on the Internet I found the library W3.js of the site w3schools, and I saw this function very simply
LINK:

• Complete library
• Part concerning the question

Answer 2

I did something similar like this

function pesquisa() {

    var substringMatcher = function (strs) {
        return function findMatches(q, cb) {
            var matches, substringRegex;

            // an array that will be populated with substring matches
            matches = [];

            // regex used to determine if a string contains the substring `q`
            substrRegex = new RegExp(q, 'i');

            // iterate through the pool of strings and for any string that
            // contains the substring `q`, add it to the `matches` array
            $.each(strs, function (i, str) {
                if (substrRegex.test(str)) {
                    matches.push(str);
                }
            });

            cb(matches);
        };
    };
    Getmateriasfromserver(function(a)    {
        var geral = a;
        var materias = geral[0];
        console.log(materias);

        $('#the-basics .typeahead').typeahead({
                hint: true,
                highlight: true,
                minLength: 1
            },
            {
                name: 'materias',
                source: substringMatcher(materias)
            });
    });
}
function fecharmodal()
{
    $('#portfolioModal2').modal('hide');
    $('#portfolioModal1').modal('hide');

}
function resgatevalor() {
    Getmateriasfromserver(function(a)    {
    var form = document.getElementById('formulario');

    form.addEventListener('submit', function(e) {
    var i_aux;

            var campo = document.getElementById('barra-pesquisa').value;
            var geral = a;
            var nome_aux = geral[0];
            for(var i=0;i<nome_aux.length;i++){
                if(campo === nome_aux[i])
                {
                    i_aux = i;
                }
            }
            // alerta o valor do campo
            var codigo = geral[3];
            var prof = geral[2];
            var dias = geral[4];
            var horario = geral[6];
            var vagas = geral[1];
            var local = geral[5];

            $('#modalResultado').modal('show');
            $('#modalResultado').find('.principal').text(campo + " :");
            $('#modalResultado').find('.codigo').text("Código- " + codigo[i_aux]);
            $('#modalResultado').find('.prof').text("Professor: " + prof[i_aux]);
            $('#modalResultado').find('.dias').text("Dias: " + dias[i_aux]);
            $('#modalResultado').find('.horario').text("Horário: " + horario[i_aux]);
            $('#modalResultado').find('.vagas').text("Vagas: " + vagas[i_aux]);
            $('#modalResultado').find('.local').text("Local: " + local[i_aux]);


            e.preventDefault();

        });
    });
}

this site explains well: http://codigofonte.uol.com.br/codigos/funcao-autocompletar-com-jquery-php-e-banco-de-dados