BatchAutocompleteLib

This library was generated with Angular CLI version 9.1.13.

Installation

npm

npm install @batchservice/batch-autocomplete-lib

yarn

yarn add @batchservice/batch-autocomplete-lib

Integration

Step 1: Import the BatchAutocompleteLib:

import { BatchAutocompleteLibModule } from '@batchservice/batch-autocomplete-lib';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  imports: [
    BatchAutocompleteLibModule.forRoot('BATCH_DOMAIN_SERVER', 'BATCH_API_KEY')
  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
})
export class AppModule {}

• Replace BATCH_DOMAIN_SERVER with batch service provided domain.
• Replace BATCH_API_KEY with batch service api key.

Step 2: Add into your component html file.

<bs-address-autocomplete
   (selected)='selectEvent($event)'
   (handleError)='handleError($event)'
   notFoundText='Not found data'
   placeholder='Enter your address'
   (suggestionList)='suggestionList($event)'
   [recentSearch]="recentSearch"
   [debounceTime]='700'
   [showNotFound]=true
   [take]='5'
   displayData="name"
   [filterType]="['address', 'formatted-street', 'zip']"
   >
</bs-address-autocomplete>

• Here recentSearch is fully optional.
• Here take is fully optional.
• Here displayData is fully optional
• In filterType you can pass this option only ['address', 'formatted-street', 'zip', 'building', 'city', 'locality', 'county', 'state']

Step 3: Add into your component file so you can use below function.

class TestComponent {

  // Recent search data should be in below format
  public recentSearch = [
    {name: '8300 Apple'},
    {name: 'Apple St.'},
    {name: '89001 Alamo'},
    {name: '58651 Rhame'}
  ];
 
  selectEvent(item: any) {
    // Do Your Execution with data
    console.log('Selected item', item);
  }

  handleError(error: any){
    // Handle error as you want
    console.log(error);
  }

  suggestionList(data: any){
    // Suggestion list data
    console.log('suggestion list data', data);
  }
}