Skip to content

Plugin jQuery para auto completar endereço usando o CEP dos Correios

Notifications You must be signed in to change notification settings

rfbastos/autocomplete-address

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Plugin jQuery para auto completar endereço

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.

Suporte de Browser

IE Chrome Firefox Opera Safari
IE 10+ ✔ Último ✔ Último ✔ Último ✔ Último ✔

Começando

Usando

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"/>

Usando data-attributes

<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 />

Usando classe

<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" />

Usando seletor para cada campo

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

Como contribuir

Verifique CONTRIBUTING.md.

Licença

MIT License © Arthur Figueiredo

About

Plugin jQuery para auto completar endereço usando o CEP dos Correios

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%