Input City Multi (Seleção Múltipla de Municípios)

Versão: 1.0.0 Data: 13/03/2026

---

Visão Geral

O componente Input City Multi permite a seleção múltipla de municípios brasileiros por meio de checkboxes, com pesquisa instantânea, filtro por UF e exibição de tags para os itens selecionados. É uma evolução do Input City para cenários em que mais de um município deve ser escolhido.

---

Estrutura HTML

<div class="input-city-multi" id="meuInputCityMulti">
    <!-- Trigger (Campo visível com tags) -->
    <div class="input-city-multi-trigger" tabindex="0">
        <div class="input-city-multi-tags">
            <!-- Tags geradas dinamicamente -->
            <span class="input-city-multi-tag">
                Município Exemplo
                <button type="button" class="input-city-multi-tag-remove">&times;</button>
            </span>
        </div>
        <input type="text" class="input-city-multi-search" placeholder="Pesquisar município...">
    </div>

    <!-- Dropdown -->
    <div class="input-city-multi-dropdown">
        <div class="input-city-multi-filters">
            <select class="input-city-multi-uf-filter">
                <option value="">Todas as UFs</option>
            </select>
        </div>

        <div class="input-city-multi-list">
            <!-- Itens gerados via JS -->
            <label class="input-city-multi-item">
                <input type="checkbox" value="123">
                <span>Nome do Município - UF</span>
            </label>
        </div>

        <div class="input-city-multi-footer">
            <span class="input-city-multi-count">0 selecionados</span>
            <button type="button" class="input-city-multi-clear">Limpar</button>
        </div>
    </div>

    <!-- Inputs ocultos (valores reais) -->
    <input type="hidden" name="municipios_ids" class="input-city-multi-value">
</div>

---

Funcionalidades

1. Seleção múltipla: Permite escolher vários municípios simultaneamente via checkboxes.
2. Pesquisa instantânea: Filtra a lista de municípios enquanto o usuário digita.
3. Filtro por UF: Restringe a exibição dos municípios a uma unidade federativa.
4. Tags de selecionados: Exibe os municípios escolhidos como tags removíveis no campo trigger.
5. Limpar seleção: Botão para remover todos os municípios selecionados de uma vez.

---

JavaScript

O componente é inicializado como plugin jQuery e aceita callbacks para interação com o restante da aplicação.

$('#meuInputCityMulti').inputCityMulti({
    endpoint: '/api/municipios',
    onChange: function (selecionados) {
        console.log('Municípios selecionados:', selecionados);
    },
    onClear: function () {
        console.log('Seleção limpa');
    }
});

---

Dark Mode

Suporte completo ao modo escuro, ajustando cores de fundo do dropdown, tags, checkboxes e inputs de pesquisa.

---

Mantido por: Equipe Ipeweb