Plugin jQuery para auto completar endereço usando o CEP dos Correios
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
dist
src
.editorconfig
.gitignore
.jshintrc
CONTRIBUTING.md
Gruntfile.js
README.md
package.json

README.md

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