1

I'm building a search feature that needs to use a typeahead that will suggest results from multiple datasets of different type of items.

I have used the Angular UI Bootstrap's typeahead directive for a single data. The documentation mention custom templates, but nothing about supporting grouping of results.

For example, I would like to be able to type in "san" and see results for people and cities, with group labels:

Cities

  • San Francisco
  • San Diego

People

  • Santana
  • Sanchez
  • Sandip

Is this possible using Angular UI Bootstrap's typeahead?

Artem K.
  • 804
  • 6
  • 15

1 Answers1

1

Found this discussion very helpful to set me on the right track:

AngularUI Bootstrap Typeahead Grouping Results

The overall approach is to:

  1. add a "data type" identifier to each set of results
  2. merge data sets together
  3. during filtering, identify the first item of each data type.
  4. a custom typeahead template, look for the "first" identifier, and include additional HTML to label the section of results
Community
  • 1
  • 1
Artem K.
  • 804
  • 6
  • 15