/autocomplete-address

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

Primary LanguageJavaScript

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

  • Instalando pelo npm:
    npm i github:arthurfigueiredo/autocomplete-address -S

  • Clonando via Git:
    git clone git@github.com: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>
  1. Inclua o script do plugin:
<script src="jquery.autocomplete-address.min.js"></script>
  1. 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