feat(typeahead): add using multiple sets of results at typeahead

[dessalines]

I need to include multiple result sets in my search bar dropdown, for example, searching for songs, and albums. Is there any way to do this yet?

Example

[dessalines]

Any updates on this, I could potentially do a PR if that's okay.

[adrianfaciu]

@tchoulihan I don't think there are any updates so far. So if you're able to help, it would be nice 😄

[mixomat]

I'm working on grouped matches / result sets in this fork:
https://github.com/mixomat/ng2-bootstrap/tree/feat-typeahead-groups

I think the grouping would fix this feature request as well.

This is wip right now, created initial tests for the typeahead directive and the container component.
I'm almost ready for a PR for integration or further discussion / improvements.

[dessalines]

My use case is fetching from 2 different endpoints, (or .json files) like twitter's example above.

This means it makes sense to make the object more embedded, so something like:

<input [(ngModel)]="typeaheadSelected"
  [typeahead]="[nbaTypeAhead, nhlTypeAhead]"
  class="form-control">

nbaTypeAhead: TypeAhead = {
  display: 'team',
  source: this.nbaTeams,
  templates: {
    header: '<h3 class="league-name">NBA Teams</h3>'
  },
  onSelect(selected): {
    ...
  }
};
nhlTypeAhead: TypeAhead = {
  display: 'team',
  source: this.nhlTeams,
  templates: {
    header: '<h3 class="league-name">NHL Teams</h3>'
  },
  onSelect(selected): {
    ...
  }
}

[mixomat]

I was thinking about the approach to expose the Typeahead model class, but this would force the User to always provide the typeahead options as a complex object.

So the simple use case, where you just want to provide an array of strings without any grouping, gets more complicated.

[mixomat]

@dessalines With the grouped approach you can still get this working by combining and flattening the datasets, once the fetch to the multiple data sources has completed.

Something like Observable.combineLatest(nbaData, nhlData), () => ...).flapMap(...).toArray() should do the trick.

[Martin-Luft]

@dessalines does @mixomat approach helps you? Can I close this issue?

[Martin-Luft]

@dessalines look at @mixomat PR #1088 :)

[dessalines]

@mixomat I think for that to work, the result objects would have to have identical fields(they don't), and be manipulated to add a custom group field name to every object.

I think this doesn't fit my use case, #1088 is more about grouping a single result set under different titles, while my use case is about multiple result sets, IE, fetching from different sources with potentially different data, and displaying them on the same typeahead box.

https://twitter.github.io/typeahead.js/examples/#multiple-datasets

[mixomat]

@dessalines You're right, the typeahead directive expects kind of a normalized datasets, where each item is of the same model class.

Fetching from different sources and grouping by source type (the NBA/NHL team use case) is still possible with the current implementation, as both sources share the same model (US Sports Team).

If the model differs from data source to data source, it can't be displayed right now, as only a single itemTemplate reference, optionField and groupField is supported, right now.

[valorkin]

it could be tricky but I will try to make it in typeahead v2