Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including address-searcher with all npm packages installed. Try it out:

var addressSearcher = require("address-searcher")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

address-searcher v1.11.1

Address searching with typeaheads and multiple choices

AddressSearch (Demo)

Dependencies

Address searching with typeaheads and multiple choices

Doc

  • Installation

Simply import Google Places API & AddressSearch into your HTML.


<link rel="stylesheet" href="address-search.min.css">
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
<script src="address-search.min.js"></script>
  • How to use

Create a new AddressSearch object with a query String or an Element as the first parameter :

let address = new AddressSearch('div.with[any="selector"]', options, delay);
// OR
let element = document.querySelector('li.terally[any="thing"]');
let address = new AddressSearch(element, options, delay);
  • Options

You can automatically fill inputs with address informations when the user selects an address.
To do that, simply add the information type you want and the selector for the input to fill.

The options object works as follows

// GET THE COMPONENT FULL NAME
typename : 'targetInput[selector]'
// GET THE COMPONENT SHORT NAME
typename_short : 'targetInput[selector]'

Available components:

{
  street_number: '...',
  route: '...',
  country: '...',
  administrative_area_level_1: '...',
  administrative_area_level_2: '...',
  administrative_area_level_3: '...',
  administrative_area_level_4: '...',
  administrative_area_level_5: '...',
  colloquial_area: '...',
  locality: '...',
  sublocality: '...',
  neighborhood: '...',
  premise: '...',
  subpremise: '...',
  postal_code: '...',
  point_of_interest: '...'
}
  • Delay

You can use the third parameter to enter a delay (ms).
This delay will be used before displaying Google API predictions after each keypress.
This can help you mitigate the amount of requests made on your account.

The delay parameter works as follows

new AddressSearch(element, options, 500);
  • Methods

See the documentation for the method definitions.

  • Example

See this JSFiddle for a working example

Authors

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free