Displaying multiple grouped data sets using Angular UI Bootstrap typeahead?

Question

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?

Community · Accepted Answer · 2017-05-23 11:51:32Z

1

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

AngularUI Bootstrap Typeahead Grouping Results

The overall approach is to:

add a "data type" identifier to each set of results
merge data sets together
during filtering, identify the first item of each data type.
a custom typeahead template, look for the "first" identifier, and include additional HTML to label the section of results

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Dec 2, 2015 at 20:25

Artem K.

8046 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Displaying multiple grouped data sets using Angular UI Bootstrap typeahead?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related