Group by categories

[keithslater]

Anyway to group results by categories? It would be nice to show the category name and list the items below it.

[timtrueman]

The results are grouped by dataset. Maybe we need two templates: one for each result and one for each dataset (category) of results

[vskarich]

Custom grouping would be nice to add, would have to support an optional category attribute in the datum object.

[jharding]

The datasets would be the categories.

[jharding]

The changes I made in #15 make something like this pretty easy. We could add header and footer to the dataset options and generate something like this:

<div class="tt-dropdown-menu">
  {{#dataset}}
    <div class="tt-dataset-{{name}}">
      <!-- HEADER GOES HERE -->
      <div class="tt-suggestions">
        {{#suggestions}}
          <div class="tt-suggestion">{{{html}}}<div>
        {{/suggestions}}
      </div>
      <!-- FOOTER GOES HERE -->
  {{/dataset}}
</div>

I don't really see any downside to this and I could have it ready to go for v0.9. @keithslater would this solve your issue?

[daraosn]

What if the multiple datasets point to the same remote url (as twitter does with https://twitter.com/i/search/typeahead.json?count=10&q=%QUERY)?

I'm having troubles in this case, because the _processRemoteSuggestions method, is not able to parse categories, it's made only for non-multidimensional array responses, or strings.

I want to be able to parse a JSON response like { topics: [...], users: [...] }

Do you know if is there a workaround for this?

[jharding]

Supporting something like this is definitely on the roadmap. You should be able to handle this scenario in v0.9 in a roundabout way and in a later version the hope is to add seamless support for it.

[daraosn]

I'm working on a fix by doing

                    this.transport.get(this.queryUrl, query, this._processRemoteSuggestions(callback, matchedItems).bind(this));

and

            _processRemoteSuggestions: function(callback, matchedItems) {
                return function(data) {
                    var remoteAndLocalSuggestions = {}, dedupedSuggestions = [];
                    if(utils.isArray(data[this.name])) {
                      data = data[this.name];
                    }
...

It works, but transporter only calls _processRemoteSuggestions once, need deeper chances I guess. If I get to fix it, will create a pull request.

[Vidhya-Dilip]

In which file should this be added?

<div class="tt-dropdown-menu">
  {{#dataset}}
    <div class="tt-dataset-{{name}}">
      <!-- HEADER GOES HERE -->
      <div class="tt-suggestions">
        {{#suggestions}}
          <div class="tt-suggestion">{{{html}}}<div>
        {{/suggestions}}
      </div>
      <!-- FOOTER GOES HERE -->
  {{/dataset}}
</div>