Sepomex-form-plugin NPM

SepomexForm with Google Maps integration facilitates the use of forms with addresses in your application.

About

SepomexForm helps you to easily manage your forms with address information.

SepomexForm brings you easy implementation of form filling using Google Maps Api, by automatically filling fields based on a Google Maps arker, and by placing markers based on form information.

SepomexForm has a second functionality, by using the Sepomex API, it allows fields of your form to be automatically filled when typing more specific information. See below for examples and a more thorough explanation.

SepomexForm has even a third functionality! It migrates all data from Sepomex Api to JSModels

Installation of Google Map Sepomex Form:

Include jQuery:

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

Include Google Maps Api. You will need an API key, if you don't have one you can get it here:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

Include plugin's code:

<script src="dist/sepomex-form-plugin.js"></script>

Call the plugin:
```
$.fn.sepomexForm();
```

Installation of Autocompleting with Sepomex Api:

Include jQuery:

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

Install all Node packages dependencies
```
  npm install
```
Install browserify, you can see the instructions here

Include plugin's code:

<script src="dist/sepomex-form-plugin.js"></script>

Use browserify command to bundle all Node.JS requires. Please look for more information here
Call the plugin:
```
  $.fn.sepomexForm();
```

Configuring SepomexForm

Default config

By default SepomexForm uses the following IDs in order to know what fields have to be filled, if you wish to use the default configuration then you must use these ids in you containers otherwise SepomexForm will not behave as expected.

  {
    formContainer: "#AddressForm",
    mapContainer: "#MapWrapper",
    numberContainer: "#AddressNumber",
    streetContainer: "#AddressStreet",
    suburbContainer: "#AddressSuburb",
    cityContainer: "#AddressCity",
    stateContainer: "#AddressState",
    countryContainer: "#AddressCountry",
    zipCodeContainer: "#AddressZipCode"
  }

Attribute	Type	Default	Description
`formContainer`	String	`#AddressForm`	Specifies the container of the form to be filled.
`mapContainer`	String	`#MapWrapper`	Specifies the container for the Map.
`numberContainer`	String	`#AddressNumber`	Specifies the input for the number.
`streetContainer`	String	`#AddressStreet`	Specifies the input for the Street.
`suburbContainer`	String	`#AddressSuburb`	Specifies the input for the Suburb.
`cityContainer`	String	`#AddressCity`	Specifies the input for the City.
`stateContainer`	String	`#AddressState`	Specifies the input for the State.
`countryContainer`	String	`#AddressCountry`	Specifies the input for the Country.
`zipCodeContainer`	String	`#AddressZipCode`	Specifies the input for the Zipcode.

Custom config

If you wish to use different ids as the default ones, SepomexForm allows you to override them. In order to do that use the following, before calling the plugin.

  $.fn.sepomexForm.defaults.formContainer = "#CustomFormContainer";
  $.fn.sepomexForm.defaults.mapContainer = "#CustomMapContainer";

  // Plugin call
  $.fn.sepomexForm();

Configuring AutoCompleteForm

Default config AutoCompleteForm

By default AutCompleteForm uses the following IDs in order to know what fields have to be filled, if you wish to use the default configuration then you must use these ids in you containers otherwise AutCompleteForm will not behave as expected.

  {
    suburbContainer: "#AddressSuburb",
    cityContainer: "#AddressCity",
    stateContainer: "#AddressState",
    zipCodeContainer: "#AddressZipCode"
  }

Attribute	Type	Default	Description
`suburbContainer`	String	`#AddressSuburb`	Specifies the input for the Suburb.
`cityContainer`	String	`#AddressCity`	Specifies the input for the City.
`stateContainer`	String	`#AddressState`	Specifies the input for the State.
`zipCodeContainer`	String	`#AddressZipCode`	Specifies the input for the Zipcode.

Custom config

If you wish to use different ids as the default ones, AutoCompleteForm allows you to override them. In order to do that use the following, before calling the plugin.

  $.fn.autocompleteForm.defaults.suburbContainer = "#CustomSuburbContainer";
  $.fn.autocompleteForm.defaults.cityContainer = "#CustomCityContainer";
  $.fn.autocompleteForm.defaults.stateContainer = "#CustomStateContainer";
  $.fn.autocompleteForm.defaults.zipCodeContainer = "#CustomZipCodeContainer";

  // Plugin call
  $.fn.autocompleteForm();