jCep

About jcep

Jcep is a library to helpful a search address by CEP on Brazil. No dependency with jQuery or anything.

Live Demo

Install by bower

bower install jcep

How to use

It's very simple. Look by example:

new jcep();

Elements by data attributes

If you using data attributes on your html, this library working with auto-detect of elements on page. Eg.

HTML

<form action="#">
  CEP:          <input type="text" data-cep="cep">
  Street:       <input type="text" data-street="street">
  Number:       <input type="text" data-number="number">
  Neighborhood: <input type="text" data-neighborhood="neighborhood">
  City:         <input type="text" data-city="city">
  State:        <input type="text" data-state="state">
</form>

JavaScript

new jcep();

Obs: If you not specify any callbacks, this library will automatically fill your form with results of search.

Specify elements

If you choose specify elements, you ought to use by this way:

JavaScript

new jcep({
  elements: {
    cepEl: '.cep',
    streetEl: '.street',
    numberEl: '.number',
    neighborhoodEl: '.neighborhood',
    cityEl: '.city',
    stateEl: '.state'
  }
});

Callbacks by functions

You can configure jcep to working with functions to returns results. See for explanation about this callbacks.

Success

You can use success callback to get result of search. The result is sent with params for success function. Eg

new jcep({
  ...
  success: function(data) { console.log(data) },
  ...
});

Error

You can use error callback to warn about errors. The error message is sent with params for error function. Eg

new jcep({
  ...
  error: function(error) { console.error(error) },
  ...
});

Before Send

The beforeSend callback is use before the request is sent to search for the zipcode.

new jcep({
  beforeSend: function() { console.log('before sending the request') },
});

Callbacks by events

You can configure callback by events

Success

If you want receive results of search by events, it's easy. Eg.

new jcep({
  triggerEventName: 'test'
});

document.addEventListener('test:success', function(data) {
  console.log('results: ', data);
})

Error

If you want receive error message of search by events, it's easy. Eg.

new jcep({
  triggerEventName: 'test'
});

document.addEventListener('test:error', function(error) {
  console.error('error: ', error);
})

Before Send

This event will be triggered before the request is sent to search for the zipcode.

new jcep({
  triggerEventName: 'test'
});

document.addEventListener('test:beforeSend', function() {
  console.log('before sending the request');
});

Obs: The event names contains, name (you specified on configuration) with prefix (:success or :error). Be careful don't forget the prefix in the end of event name

Contributors

• Saulo Santiago (SauloSilva)