Create complex interactions with just a few lines of code!
Billing strategy and buffer options enable cost and usability optimization with the flip of a switch.
Built-in developer guidance ensures an implementation that guesses better with fewer keystrokes.
{}
const inputElement = document.getElementById("locationField");
const autocomplete = new tsciences.SpartanAutocomplete(inputElement,
/* Advanced optimization in one simple config object */
{
billingStrategy: "request-geocode",
letterBuffer: 2,
timeBufferMilliseconds: 200,
type: 'geocode',
location: {
coordinates: { lat: 38.251, lng: -85.761 },
radius: 10000
},
countries: [ 'us', 'ca' ]
}
);
/* Assign listener to prediction selection event */
autocomplete.onPredictionSelected((selectedPrediction) => {
fetchPlace();
});
/*
* Fetch best result even if user typed out or
* pasted and submitted without selecting prediction
*/
function fetchPlace() {
autocomplete.getPlace().then((place) => {
/* Use place result */
});
}
/**********************
**** Options Type ****
**********************/
interface SpartanAutocompleteOptions {
/* Billing strategy determines how API calls are
* made to optimize cost. */
billingStrategy:
/* Use only sessions / getPlaceDetails; useful if fields
* are needed that the Geocoding API doesn't provide */
'session-only' |
/* Hybrid approach that uses sessions but will fall back on
* geocoding if session wasn't started due to copy / paste or
* zip code submission; useful for some low-volume cases,
* especially store store locators. */
'session-geocode' |
/* Always bill predictions per-request and complete with
* geocode call; best for almost all high-volume cases due to
* volume discount tier structure. */
'request-geocode';
/* Hold back on making predictions requests until this number
* of non-number characters have been entered. Reduces
* predictions requests with very little downside to usability.
* Defaults to 2. */
letterBuffer: number;
/* Hold back on making predictions requests until this number
* of milliseconds have passed since last keystroke. May
* significantly reduce keystroke requests when a fast typer
* is involved. Tune this number to balance budget and usability
* impact. */
timeBufferMilliseconds: number;
/* Target type of autocomplete predictions
(see developer guide) */
type:
/* Geocode: any place with a location (excludes some business
* results) */
'geocode' |
/* Address: any place with a specific address */
'address' |
/* Establishment: only business place results */
'establishment' |
/* Regions: a broad category including many levels of location
* areas */
'regions' |
/* Cities: returns city level results */
'cities' |
/* All: no restriction on results */
'all';
/* Location / radius bias. Use whenever user location is available
* (such as using Geolocation API) to radically improve results */
location: {
/* Coordinates as { lat: number, lng: number } */
coordinates: google.maps.LatLngLiteral;
/* Radius in meters */
radius: number;
/* Remove all suggestions outside radius. */
strict?: boolean;
} | {
/* Coordinates as { lat: number, lng: number } */
bounds: google.maps.LatLngBoundsLiteral;
/* Remove all suggestions outside bounds. */
strict?: boolean;
} | null;
/* Countries (up to five) given as two-digit country codes. Use
* whenever possible to improve results and reduce keystrokes! */
countries: string[] | null;
}