Выпадающее окно поиска с использованием вывода API

Question

Я использую API, в котором есть названия упражнений. Я хочу создать окно поиска с выпадающим списком автозаполнения (например, suggetions, которые Google дает вам до того, как вы закончите sh до ввода текста) Но я хочу использовать API в качестве результата.

Мне удалось получить показания из апи.

async function getExercises () {
    let url = 'https://wger.de/api/v2/exercise/?format=json'

    while (url) {
        const res = await fetch(url)
        const data = await res.json()

        for (const item of data.results) {
            console.log(item.name)
        }


        url = data.next

    }
}

но мое окно поиска работает, вы видите, что я делаю неправильно? это мой html:

        <input id="exercise-search" class="form-control" type="text" autocomplete="off" name="data">

        <script>
            $(document).ready(function () {
                $("input").on("mouseover", function () {
                    var a = $(this).attr('name');
                    populate(a);
                })
            })

        </script>

И это сценарий, который я использую для получения результатов из API.

getExercises().catch(e => console.error('Failed to get exercises', e))

function populate(sourceString){
    var myList = document.getElementById(sourceString);

    var sourceObject = eval(sourceString);

    var obj = new sourceObject();

    var options = '';

    for(var i=0; i <obj.list.length; i++){
        options += '<option value = "'+obj.list[i] +'">';
    }
    myList.innerHTML = options;
}

Можете ли вы указать мне правильное направление?