Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

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.

  • Baixar as dependências:
    npm install

  • Rodar tasks Grunt:
    grunt

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

About

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

Resources

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.