estoy tratando de usar esta api de scryfall, si sabes qué es mtg https://scryfall.com/docs/api/cards/autocomplete

para crear un cuadro de búsqueda con autocompletar pero quería hacerlo con algo normal como javascript pero no estoy seguro de cómo hacerlo.

en este caso, quiero que sea una sugerencia automática que detecte o capture cada pulsación de tecla en el cuadro de búsqueda y pase los valores a la API y devuelva una lista de valores sugeridos o autocompletados. Usando bootstrap y creó algo como esto actualmente

 <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>

No estoy seguro de cómo empezar desde aquí usando la API. ¿Alguien puede mostrarme alguna orientación? gracias. quería intentar mantenerlo lo más simple posible ya que mi backend está usando fastapi python con jinja2+ bootstrap para obtener otros datos de scryfall api