Star on GitHub

angular-hierarchical-typeahead

Multiple Level TypeAhead Component

This component is best suited for navigating through large sets of hierarchical data fetched from an API (it can also be locally loaded data, but it defeats the purpose), it has multiple view options for the data, per element callback in your controller and custom element callback (if used with object mapping, see the examples).

Features:

  • View large sets of hierarchical data
  • Normal view, mapped table view, key value table property view
  • Callback on each element select, with it's type and id
  • Extra Callback on individual elements if mapped data is used
  • External Service to manipulate actions inside the component (go back to level X, go back to item Y on level X)
  • Load More items with external logic to handle `pagination`
  • Color and Icon customizable levels
  • i18n support (push a specific object with all the translations)

DEMO: A list of companies and their presence in countries:
Full Info View with Object Mapping
Click to Open

Email Support (first level): {{emailSupport.name}}: {{emailSupport.email}}
Load item from list: ID: {{loadItem.id}} - TYPE: {{loadItem.name}}

Full Info View without Object Mapping (properties are used directly). Also, no extra row actions can be used like this
Click to Open

Load item from list: ID: {{loadItem.id}} - TYPE: {{loadItem.name}}

List View, no object mapping, no extra callbacks.
Click to Open

Load item from list: ID: {{loadItem.id}} - TYPE: {{loadItem.name}}

DEMO: Single Level Display:
Full Info View with Object Mapping
Click to Open

Email Support (first level): {{emailSupport.name}}: {{emailSupport.email}}
Hide Company (first level): {{hideCompany.name}}: {{hideCompany.id}}
Load item from list: ID: {{loadItem.id}} - TYPE: {{loadItem.name}}

DEMO: Local search with FUSE:
Full Info View with Object Mapping
Click to Open

Email Support (first level): {{emailSupport.name}}: {{emailSupport.email}}
Hide Company (first level): {{hideCompany.name}}: {{hideCompany.id}}
Load item from list: ID: {{loadItem.id}} - TYPE: {{loadItem.name}}
Available Actions
Action Description
& Move up and down on the list with keyboard arrows
CLICK Send callback to controller with the element selected, for opening a new view etc.
SPACE
{{translations.HELP_CLICK}} Open the element in a new Level
ENTER
BACKSPACE Go back one level
CLICK on a Level Go back to the clicked Level
ANY KEY While on the item list any key you press will focus the search input and make a new search.
Component API / Options
Option Value Description
art-typeahead The main directive declaration. Example usage `< art-typeahead levels="tiers" pagination="true" trigger="callbackID(id, type, fullResponse)" source="dataEndpoint">`
art-levels Object Mandatory. An object containing levels description. Object accepted: `[{name: "Organisation", icon: "fa fa-users", color: "#3f3f3f", bColor: "#a6b5bd"}]`
art-levels-map Object Optional. A mapping object for each level or for any level, but if you to make a map for the second level, the object must look like [[],[{map}]]. When a map is set, only the keys from the map will be displayed, you can also send a callback button for a row. A map example looks like this: `$scope.tiersMappings = [[{name: "Building Code", value: 'buildingCode'}, {name: "Building Name", value: 'name'}, {name: 'Action', value: $scope.customMapAction, actionName: 'Set Active Organisation'}]]`. The callback function will send the item clicked back in the controller, you can do actions like activate something separate than the normal click / space call.
art-display-all boolean Optional. If set to true it will display all the properties of the data received in a table
art-trigger function Mandatory. A function to callback the choice selected in the controller, response consists of three parameters, `id`, `type` and 'fullResponse', the second being the level name and the third is the full response element from the source array.
art-source promise-enabled function Mandatory. The service that is called to get the data, parameters are `type`, `query` and `pagination`, `type` is the current level, `pagination` is a Boolean. The logic is on you in the controller. The received data should be arrays like [{id: 12, name: 'SomeItem'}], preprocess in the controller if necessary.
art-pagination boolean Optional. If `true`, there will be a load more list item, and the `source` call will contain a true pagination parameter. The logic is on you in the controller.
art-min-query integer Optional. Query length to trigger a search.
art-max-results integer Optional. Max results to show before displaying the user a message to user the search bar. Max results is tied with the art-call-size, their division must yield a number with no decimals, e.g. 25 results per page, show the max results message at 100 elements, 100 / 25 = 4.0
art-translations Object Optional. An object with translations for the whole component static messages / text. Get the object on the github page.
art-call-size integer Optional. Number of items that the `art-source` service will give on each call. Defaults to 25 if not specified
artTypeExternal Angular Service Optional. You can call this service to manipulate level actions inside the component. We have artTypeExternal.goBackToLevel(1) or artTypeExternal.goBackToItem({id: 25, name: 'Google', level: 0})