josenelsoncultri/autocomplete-address

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

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 10+ ✔	Último ✔	Último ✔	Último ✔	Último ✔

Começando

• 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.

Usando

1. Inclua préviamente o jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

2. Inclua o script do plugin:

<script src="jquery.autocomplete-address.min.js"></script>

3. 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">

Usando via 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 por classes

<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 por seletores específicos para cada campo

$('#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/',
});

Configurações

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.

Como contribuir

Verifique CONTRIBUTING.md.

Licença

MIT License © Arthur Figueiredo