Address Autocomplete enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.
This guide will get you started with integrating the Batch Address Auto Complete React Library with your applications. Everything about creating a Client Token, Installing the library and integrating it with your applications is covered in this guide.
Installation and Integration
Step 1: Download Library
Autocomplete library is registered as a package on npm. You can install the latest version with the npm CLI command
npm install @batchservice/react-batch-autocomplete-lib
As an alternative you can use the Yarn CLI command
yarn add @batchservice/react-batch-autocomplete-lib
Once the Library is downloaded, it is ready to be included in our applications.
Step 2: Library Initialization
To begin using our downloaded library in our applications, we must first import our library with authentication details. Create a component file with following code or add the code in your existing component file -
TOKEN: For steps to create a token refer Creating a Client Token
import React from 'react';
import { ReactBatchAutocomplete } from '@batchservice/react-batch-autocomplete-lib';
const <YourComponentName> = () => (
const recentSearch = [
// List of suggestions to be displayed before any input is provided in
search input box.
]
const handleError = (e) => {
// Handle error as you want
console.log('Error while searching: ',e);
}
const suggestionList = (data) => {
// Suggestion list data
console.log('Suggetion List: ', data);
}
const onSelect = (data) => {
// Do Your Execution with data
console.log('Seleted item: ', data)
}
return(
<div>
<ReactBatchAutocomplete
placeholder="Enter your address"
notFoundText="Not found data"
debounce = "700"
apiKey="TOKEN"
domainServer="URL"
recentSearch ={recentSearch}
handleError={(e) => handleError(e)}
suggestionList={(data) => suggestionList(data)}
onSelect={(data) => onSelect(data)}
displayData="name"
showNotFound={true}
take={5}
filterType={['address', 'formatted-street', 'zip']}
/>
</div>
);
);
export default YourComponentName;
Replace URL with URL and TOKEN with the token generated in Step 2
Step 3: Configuration
Initially library will be configured with default configurations. You can update these parameters as required
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
placeholder: This option is used to set the text to be shown in the text input so that users will understand what are they expected to input. This text will be removed once user starts typing in. By default it will set as Enter your address
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.
debounceTime : 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.
suggestionList : The function provided in this parameter will be triggered when suggestion list is returned by API.
selected : The function provided in this parameter will be triggered when user selects an item from the suggestion list.
handleError : The function provided in this parameter will be triggered when there an error in API.
recentSearch : This parameter is used to set some pre-defined list of suggestions which can be displayed when user clicks on search input before any input is provided in the search box. This parameter should be set with array of suggestions as a key value pair as follows -
public recentSearch = [
{name: '8300 Apple'},
{name: 'Apple St'},
{name: '89001 Alamo'},
{name: '58651 Rhame'}
];
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.
Well done!! You can begin using Batch Address Autocomplete component in your application by adding it on your webpage.
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.