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 ✔ |
- Clone o projeto:
https://github.com/arthurfigueiredo/autocomplete-address.git
- Ou baixe jquery.autocomplete-address.min.js e inclua no seu projeto.
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, o seletor #cep abaixo é o input onde o usuário vai informar seu CEP (você pode especificar qualquer seletor para iniciar o plugin):
$("#cep").autocompleteAddress();
<input name="cep" id="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" />
Abaixo uma lista de opções disponíveis:
$("#cep").autocompleteAddress({
address: "input#meu-endereco",
neighborhood: "form .fields .bairro",
city: "form #city",
state: ".my-state-field",
publicAPI: "https://viacep.com.br/ws/{{cep}}/json/"
});
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 |
Verifique CONTRIBUTING.md.
MIT License © Arthur Figueiredo