BatchData’s Address Autocomplete JavaScript Library allows developers to integrate Address Autocomplete in their applications. Using an event listener to capture keystrokes, Address Autocomplete provides a list of suggested addresses given a partial address.
Prerequisites
BatchData Address Autocomplete JavaScript Library
Downloading the Library
You can download the latest version of BatchData Address Autocomplete JavaScript Liabrary here.
To download a particular version, you can find a list of all releases here.
To automate getting future updates, you can also clone the repository.
At the top right corner, click on the clone tile.
or use the following command.
git clone https://bitbucket.org/batchleads/batchdata-autocomplete-js.git
BatchData Address Autocomplete JavaScript library consists of the minified version of the library. Found in the /dist folder are the JavaScript Library and the Styling Sheets.
Once the Library is downloaded, it is ready to be included in your applications.
Integrating BatchData Address Autocomplete JavaScript Library
To begin using the library in your application, you must first import the authentication details preferably as environment variables.
Create a JavaScript file enviroment.js and include URL and Token.
TOKEN: For steps to create a token refer Creating a Client Token
var env = {
url: 'URL',
token: 'TOKEN'
}Next import the JavaScript Library, Styling Sheets and Environment Variables into your webpage with the following code.
<link rel="stylesheet" href="<path to the downloaded library
folder>/dist/batch-address-auto-complete.min.css">
<script src="<path to the downloaded library folder>/dist/batch-address-
auto-complete.min.js"></script>
<script src="<path to the file>/environment.js"></script>
Next create a script initializing the library. The following code first creates an instance of BatchData Address Autocomplete, then an event listener is added to capture keystrokes and begin making address suggestions. Another event listener is added to handle errors.
function initialize() {
// Custom Autocomplete of Batch Service batchAutocomplete(document.getElementById("batchAddressAutoComplete"), env.url, env.token);
// Add an event listener to get value document.addEventListener("batch-address-auto-complete", function(e) {
// Here you will get data what you had selected in input by using "e.detail" console.log('Selected item: ', e.detail); });
// Add an event listener to handle error document.addEventListener("batch-auto-complete-error", function (e) {
// Here you will get error using "e.detail" console.log("Error while searching: ", e.detail); }); }Next make your script executable in your webapp by using the onload function.
<body onload="initialize()">
BatchData’s Address Autocomplete JavaScript library allows the customization of the address bar to suit your needs.
... <div class="batch-loading"> <input class="batch-autocomplete" id="batchAddressAutoComplete" notFoundText="No results found" showNotFound=true displayData="name" type="text" take='5' debounce='700' placeholder="Enter your address" filterType="address, formatted-street, zip"> <div id="batch-loader"></div> <div id="batchNoDataFound"></div> </div> ...</body>
The above code shows the default configurations.
showNotFound: This option is used to enable a notification for users when no results are found for the given string. By default it will be set as true. It can accept only boolean values.
notFoundText: This option is used to set the text to be shown when there are no results for the given input. By default it will set as No results found
displayData: This option is used to populate the data in the input box when user selects a record from searched result. By default it will populate name parameter returned for selected item. You can set it to populate - state, address , name , zip , city.
take: This option is used to set the number of results to be displayed when input is typed. By default it is set to 5.
debounce : This option is used to delay the search API call when a user is typing the keyword in input box. For example, If the value is set to 700, the search API will get triggered after 700ms post last key stroke made within 700ms. By default this value is set to 700, It is recommended to keep this value at its default value to save the API calls.
filterType : This option is used to filter the suggestion list by type of the property. By default the parameter will contain all the available types. You can keep the types you desire to get as a suggestion list. Allowed values are - zip,locality,state,formatted-street,address,building,city,county.
After customizing your address bar, you can begin using BatchData's Address Autocomplete JavaScript Library in your application.
Now that your application has been integrated with Address Autocomplete, your users only have to type the first few letters of an address and your application will suggest addresses that begin with the letters they typed.
Clicking on any of the suggested addresses automatically prepopulates the address bar with the selected address.
For more on Address Autocomplete you can visit the API Reference