Cadê minha Cidade?

O Brasil tem 5.570 municípios. E alguém achou que colocar todos em um dropdown era uma boa ideia.

Cinco mil quinhentos e setenta nomes. Em um <select>. Sem busca. Sem filtro. Scroll puro.

Você está em Sorocaba. Começa no A. Passa por Abadia de Goiás, Abaeté, Abaetetuba... rola, rola, rola... passa por Santos, São Bernardo, São Caetano, São Carlos, São José, São José do Rio Preto, São José dos Campos, São Paulo... e lá no S, depois de uns 200 "São", talvez você ache Sorocaba.

Talvez.

5.570 opções.

Em um dropdown. Sem filtro. Em 2026.

Tem estado com 645 municípios. São Paulo. Minas Gerais tem 853. Você vai scrollar por 853 nomes para achar Uberlândia?

E o pior: você já sabe a resposta. Você sabe onde mora. Você sabe digitar. Mas o formulário não te deixa. Ele te dá uma lista. Enorme. Ordenada alfabeticamente. E te deseja boa sorte.

Sinta a dor.

Achou sua cidade? Quanto tempo levou? Quantos scrolls? Em uma lista de 5.570, sua cidade é agulha no palheiro.

"Tá, mas o meu tem estado primeiro."

O clássico. Primeiro um dropdown de 27 estados. Seleciona. Aí carrega o dropdown de cidades daquele estado.

Testa.

Melhor? Um pouco. Mas se você é de São Paulo, ainda são 645 cidades. Minas, 853. Bahia, 417. Continua scrollando.

E se a lista demora para carregar? E se você seleciona o estado errado e tem que voltar? E no celular, onde o dropdown nativo ocupa a tela inteira com uma roletinha?

É menos pior. Ainda é ruim.

Digita 3 letras.

É isso. Um campo de texto com autocomplete.

Digita "Sor" e aparece Sorocaba. Digita "Ube" e aparece Uberlândia. Digita "Vot" e aparece Votuporanga.

3 letras. 1 clique. Acabou.

    Não precisa de biblioteca pesada. Não precisa de API externa. Uma lista de municípios do IBGE em JSON, um input com evento de digitação, e um filtro. São 20 linhas de JavaScript.

    input.addEventListener('input', (e) => {
      const termo = e.target.value.toLowerCase()
      const resultados = cidades.filter(c =>
        c.nome.toLowerCase().includes(termo)
      ).slice(0, 10)
      mostrarSugestoes(resultados)
    })

    Pronto. Sem dropdown. Sem scroll. Sem "cadê minha cidade?".

    "Mas e se digitar errado?"

    O autocomplete é tolerante. Digita "sorocba" e Sorocaba ainda aparece se você implementar busca fuzzy. Mas mesmo sem fuzzy, um includes simples resolve 95% dos casos. O 5% que sobra é infinitamente melhor que scrollar 5.570 opções.

    "Mas e se a lista de cidades mudar?"

    O IBGE atualiza a lista de municípios. Baixa o JSON atualizado e substitui. É um arquivo. Uma vez por ano no máximo.

    Aliás.

    Se você já pediu o CEP, nem precisa desse campo. O CEP já te dá a cidade. Mas isso é assunto de outro manifesto.

    Para de scrollar.

    Não coloca 5.570 cidades em um dropdown. Não coloca 853 cidades em um dropdown. Não coloca nenhuma quantidade de cidades em um dropdown.

    Dá um campo de texto. Deixa o usuário digitar. Filtra conforme ele digita. Mostra as opções relevantes.

    3 letras. 1 clique. Sem scroll. Sem "cadê".

    Deixa eu digitar.