LocationTypeahead

LocationTypeahead extends Typeahead and uses a LocationInput to provide a "use my current location" option in the typeahead and an icon to use the user's current location

Example Usage

<div class='location-search'></div>

// Pull in the library
const db = [
  {
    displayName: 'Boston, MA',
    lng: 74.134134,
    lat: 45.432433
  },
  {
    displayName: 'New York, NY',
    lng: 13.131442,
    lat: -45.854975
  },
  {
    displayName: 'Paris, TX',
    lng: 14.5264,
    lat: 1.425255
  }
];

const fetch = function (term, cb) {
  //We only want to fetch if it's not current location, so check for lat
  if (!term.lat) {
    var matches = db.filter(function (item) {
    return (item.displayName + '').toLowerCase().indexOf(term.toLowerCase()) !== -1;
    });

    // mimic ajax
    setTimeout(function () {
      cb(matches);
    }, 50);
  }
};

// Instantiate a component, pass the selector of the container to insert component into and the opts
const locationSearch = new UI.LocationTypeahead('.location-search', fetch, {
  currentLocationText: 'Use my location',
  geolocationAPI: window.navigator.geolocation,
  textInputOpts: {
    placeholder: 'Try "New York"'
  }
});

// Subscribe to when new choices are selected from the Typeahead
locationSearch.subscribe((choice) => {
  if (choice.isLocation) {
    console.log('location chosen', choice);
  } else {
    console.log(choice); // misc message
  }
});

// Render the DOM for the LocationTypeahead component
locationSearch.render();

params

Name	Type	Default	Description
el	string	undefined	A string of the selector for the element to put the component in
fetch	function	undefined	The function to call to fetch/refresh results
opts	object	{}	A catch all for various options. See the opts table below for options specific to this component.

opts

Name	Type	Default	Description
allowFreeForm	boolean	false	A boolean indicating if free form input will be accepted
currentLocationText	string	'Use my current location'	A string to display for "use my location"
displayProperty	string	`'displayName'`	A string indicating the property name of the property to display
fixedResults	`*[]`	`[]`	An array of results to always display
textInputOpts	object	{}	An object to pass opts to the textInput component