i am trying to use this scryfall api, if you know what mtg is https://scryfall.com/docs/api/cards/autocomplete

to create a search box with autocomplete with it but i wanted to do it with something normal like javascript but i am not sure how to do it.

in this case, i want it to be an auto suggestion that detect or capture every keystroke on the searchbox and pass the values to the api and return a list of suggested or autocomplete value. Using bootstrap and created something like this currently

<div class="container">

    <div class="row align-items-center" style="min-height: calc(100vh - 66px);">
        <div class="col-lg-6 mx-auto">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search for...">
                <span class="input-group-btn">
                    <button class="btn btn-secondary" type="button">Go!</button>
                </span>
            </div>
        </div>
    </div>
</div>

i am not sure how to start from here using the api. Can anyone show me some guidance? thank you. wanted to try keep it simple as possible since my backend is using fastapi python with jinja2+ bootstrap to get some other data from scryfall api