Plugin jQuery para auto completar endereco usando o CEP dos Correios com apenas ~2KB, sem que seja necessário alterar código existente na aplicação, muito util em sistemas de cadastro, ecommerce etc.
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|
IE 10+ ✔ | Último ✔ | Último ✔ | Último ✔ | Último ✔ |
-
Instalando pelo npm:
npm i github:arthurfigueiredo/autocomplete-address -S
-
Clonando via Git:
git clone [email protected]:arthurfigueiredo/autocomplete-address.git
(SSH)
git clone https://github.com/arthurfigueiredo/autocomplete-address.git
(HTTPS) -
Ou baixe diretamente o arquivo dist/jquery.autocomplete-address.min.js e inclua no seu projeto.
-
Baixar as dependências:
npm install
-
Rodar tasks Grunt:
grunt
- Inclua préviamente o jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
- Inclua o script do plugin:
<script src="jquery.autocomplete-address.min.js"></script>
- Chame o plugin no JavaScript - o seletor
#cep
pega o input onde o usuário vai informar o CEP (você pode especificar qualquer seletor):
$('#cep').autocompleteAddress();
Ex.:
<input id="cep" name="cep">
<input name="endereco" id="endereco" data-autocomplete-address>
<input name="bairro" id="bairro" data-autocomplete-neighborhood>
<input name="cidade" id="cidade" data-autocomplete-city>
<input name="estado" id="estado" data-autocomplete-state>
<input name="endereco" id="endereco" class="autocomplete-address">
<input name="bairro" id="bairro" class="autocomplete-neighborhood">
<input name="cidade" id="cidade" class="autocomplete-city">
<input name="estado" id="estado" class="autocomplete-state">
$('#cep').autocompleteAddress({
city: 'form #city',
address: 'input#meu-endereco',
neighborhood: 'form .fields .bairro',
state: '.my-state-field',
publicAPI: 'https://viacep.com.br/ws/{{cep}}/json/',
});
Abaixo a lista de opções disponíveis:
Atributo | Tipo | Padrão | Descrição |
---|---|---|---|
address |
String | null |
Use o seletor CSS para buscar o input endereço no DOM. |
neighborhood |
String | null |
Use o seletor CSS para buscar o input bairro no DOM. |
city |
String | null |
Use o seletor CSS para buscar o input cidade no DOM. |
state |
String | null |
Use o seletor CSS para buscar o input estado no DOM. |
publicAPI |
String | https://viacep.com.br/ws/{{cep}}/json/ |
Se você não quiser utilizar a API padrão do plugin, você pode especificar a sua API, o valor {{cep}}, representa o local onde o CEP do usuário vai ser enviado no request para sua API. |
setReadonly |
Boolean | true |
Bloqueia a edição dos campos de texto autocompletados - se quiser permitir edição, basta passar false na inicialização do plugin. |
Verifique CONTRIBUTING.md.
MIT License © Arthur Figueiredo