Autocompletar input com estados usando AJAX

autocomplete-estados.html

<style>
  #estado-sugestao {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 1000;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#estado-sugestao li {
    padding: 5px;
    cursor: pointer;
}
</style>

<input type="text" id="estado" />
<ul id="estado-sugestao"></ul>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// Quando o usuário começar a digitar no campo de texto
$('#estado').on('keyup', function() {

    // Limpa a lista de sugestões
    $('#estado-sugestao').empty();

    // Busca os estados que começam com o que o usuário digitou
    $.ajax({
        url: 'estadosBrasileiros.json',
        data: {
            termo: $(this).val()
        },
        success: function(resultado) {
            // Para cada estado encontrado
            $.each(resultado, function(i, estado) {

                // Adiciona o estado à lista de sugestões
                $('#estado-sugestao').append('<li>' + estado.nome + '</li>');
            });

            // Seleciona o primeiro estado da lista de sugestões
            $('#estado-sugestao li:first-child').prop('selected', true);

            // Autocompleta o texto do input com o estado selecionado
            $('#estado').val($('#estado-sugestao li:first-child').text());
        }
    });
});
</script>