@digitransit-component/digitransit-component-autosuggest

DTAutosuggest

Extends React.Component

Parameters

• props

Examples

const searchContext = {
  isPeliasLocationAware: false, // true / false does Let Pelias suggest based on current user location
  minimalRegexp: undefined, // used for testing min. regexp. For example: new RegExp('.{2,}'),
  lineRegexp: undefined, //  identify searches for route numbers/labels: bus | train | metro. For example: new RegExp(
   //   '(^[0-9]+[a-z]?$|^[yuleapinkrtdz]$|(^m[12]?b?$))',
   //  'i',
   //  ),
  URL_PELIAS: '', // url for pelias searches
  feedIDs: ['HSL', 'HSLLautta'], // FeedId's like  [HSL, HSLLautta]
  geocodingSources: ['oa','osm','nlsfi'],  // sources for geocoding
  geocodingSearchParams: {},  // Searchparmas fro geocoding
  getFavouriteLocations: () => ({}),    // Function that returns array of favourite locations.
  getFavouriteStops: () => ({}),        // Function that returns array of favourite stops.
  getLanguage: () => ({}),              // Function that returns current language.
  getFavouriteRoutes: () => ({}),       // Function that returns array of favourite routes.
  getPositions: () => ({}),             // Function that returns user's geolocation.
  getRoutesQuery: () => ({}),           // Function that returns query for fetching routes.
  getAllBikeRentalStations: () => ({}), // Function that returns all bike rental stations from graphql API.
  getStopAndStationsQuery: () => ({}),  // Function that fetches favourite stops and stations from graphql API.
  getFavouriteRoutesQuery: () => ({}),  // Function that returns query for fetching favourite routes.
  getFavouriteVehicleRentalStations: () => ({}),  // Function that returns favourite bike rental station.
  getFavouriteVehicleRentalStationsQuery: () => ({}), // Function that returns query for fetching favourite bike rental stations.
  startLocationWatch: () => ({}),       // Function that locates users geolocation.
  saveSearch: () => ({}),               // Function that saves search to old searches store.
  clearOldSearches: () => ({}),         // Function that clears old searches store.
  getFutureRoutes: () => ({}),          // Function that return future routes
  saveFutureRoute: () => ({}),          // Function that saves a future route
  clearFutureRoutes: () => ({}),        // Function that clears future routes
};
const lang = 'fi'; // en, fi or sv
const onSelect = (item, id) => {
   // Funtionality when user selects a suggesions. No default implementation is given.
   return null;
};
const onClear = id => {
   // Called  when user clicks the clear search string button. No default implementation.
   return null;
};
const getAutoSuggestIcons: {
  // Called for every city bike station rendered as a search suggestion. Should return the icon and 
  // color used for that station. Two icons are available, 'citybike-stop-digitransit' anditybike-stop-digitransit-secondary'.
  citybikes: station => {
     return ['citybike-stop-digitransit', '#f2b62d'];
  }
}
const transportMode = undefined;
const placeholder = "stop-near-you";
const targets = ['Locations', 'Stops', 'Routes']; // Defines what you are searching. all available options are Locations, Stops, Routes, VehicleRentalStation, FutureRoutes, MapPosition and CurrentPosition. Leave empty to search all targets.
const sources = ['Favourite', 'History', 'Datasource'] // Defines where you are searching. all available are: Favourite, History (previously searched searches) and Datasource. Leave empty to use all sources.
return (
 <DTAutosuggest
   appElement={appElement} // Required. Root element's id. Needed for react-modal component.
   searchContext={searchContext}
   icon="origin" // Optional String for icon that is shown left of searchfield. used with Icon library
   id="origin" // used for style props and info for component.
   placeholder={placeholder} // String that is showns initally in search field
   value="" // e.g. user typed string that is shown in search field
   onSelect={onSelect}
   onClear={onClear}
   autoFocus={false} // defines that should this field be automatically focused when page is loaded.
   lang={lang}
   getAutoSuggestIcons={getAutoSuggestIcons}
   transportMode={transportMode} // transportmode with which we filter the routes, e.g. route-BUS
   geocodingSize={10} // defines how many stops and stations to fetch from geocoding. Useful if you want to filter the results and still get a reasonable amount of suggestions.
   filterResults={results => return results} // Optional filtering function for routes and stops
   handelViaPoints={() => return null } // Optional Via point handling logic. This is currently managed with DTAutosuggestpanel by default, but if DTAutosuggest is used seperatelly own implementation must be provided.
   focusChange={() => return null} // When suggestion is selected, handle changing focus. This is currently managed with DTAutosuggestpanel by default, but if DTAutosuggest is used seperatelly own implementation must be provided.
   storeRef={() => return null} // Functionality to store refs. Currenlty managed with DTAutosuggestpanel by default, but if DTAutosuggest is used seperatelly own implementation must be provided.
   sources={sources}
   targets={targets}
   isMobile  // Optional. Defaults to false. Whether to use mobile search.
   mobileLabel="Custom label" // Optional. Custom label text for autosuggest field on mobile.
   inputClassName="" // Optional. Custom classname applied to the input element of the component for providing CSS styles.
   translatedPlaceholder= // Optional. Custon translated placeholder text for autosuggest field.

---

This module is part of the Digitransit-ui project. It is maintained in the HSLdevcom/digitransit-ui repository, where you can create PRs and issues.

Installation

Install this module individually:

$ npm install @digitransit-component/digitransit-component-autosuggest

Or install the digitransit-component module that includes it as a class:

$ npm install @digitransit-component/digitransit-component