Callback on Dataset

[dannyc]

In addition to the custom events, it would helpful if one could designate a callback on a selection for a specific Dataset. The use case would be like your NBA & NHL example. It the user chose a hockey team you might want to take them to their respective NHL site as opposed to a basketball team where you might want to display some information on your own page.
Alternatively, a similar result could be achieved if the category/dataset name was somehow included in the data that get triggered with the standard custom callback events. Since right now the data is a datum, and we have no way of programmaticly knowing from which dataset it came.
Thoughts? Thanks.

[jharding]

Supporting both callbacks and custom events seems redundant. I get the use case you're talking about though and I think the best way of approaching it is to include extra data within the datum i.e.

$('.typeahead')
.typeahead({
  name: 'nhl teams',
  local: [
    { value: 'Detroit Red Wings', url: '/nhl/teams/detroit' },
    // ...
  ]
})
.on('typeahead:selected', function($e, data) {
  window.location = data.url;
});

[dannyc]

Thanks for prompt response.
Right, agreed it's redundant, and removing the custom event would break everything. I only suggested a callback since that would eradicate the need for an if statement in the event subscriber, when you want to interact with the returned datum differently depending on which dataset it came from. The way I am doing it now is as you suggested by adding extra data to the datum. But if the category name could be added to the publish event data, we could avoid adding unnecessary data going over the wire.
Going back to the contrived NHL/NBA example-
Callback

$('.typeahead')
.typeahead({
    name: 'nhl teams',
    local: [
     { value: 'Philadelphia Flyers', url: 'nhl/teams/flyers' },
      // ...
    ],
    onSelection: function(datum){
     window.location = datum.value;
    }
  },
  name: 'nba teams',
  local: [
    { value: 'Philadelphia 76ers', nickname: 'Sixers' },
    // ...
  ],
  onSelection: function(datum){
    document.getElementById('nickname').innerHTML = datum.nickname;
  },
})

Name included in published event data
same dataset as above minus the onSelection

.on('typeahead:selected', function($e, data) {
  if(data.setName === 'nhl teams'){
    window.location = data.url;
  }else{
    document.getElementById('nickname').innerHTML = datum.nickname;  
  }
});

With extra data added to datum

$('.typeahead')
.typeahead({
    name: 'nhl teams',
    local: [
     { value: 'Philadelphia Flyers', url: 'nhl/teams/flyers', type: 'nhl' },
      // ...
    ]
  },
  name: 'nba teams',
  local: [
    { value: 'Philadelphia 76ers', nickname: 'Sixers', type: 'nba' },
    // ...
  ]
});
.on('typeahead:selected', function($e, data) {
  if(data.type === 'nhl'){
    window.location = data.url;
  }else{
    document.getElementById('nickname').innerHTML = datum.nickname;  
  }
});

[jharding]

Hmm typeahead.js could potentially take advantage of namespaced events and support something like:

$('.typeahead')
.on('typeahead:selected', function($e, datum) {
  // selections made from all datasets
})
.on('typeahead:selected.dataset1', function($e, datum) {
  // selections made from dataset1
})
.on('typeahead:selected.dataset2', function($e, datum) {
  // selections made from dataset2
})

That's the most elegant solution I've thought of so far.

[dannyc]

Interesting, I have never seen name-spaced custom events actually in use, but that seems like the best of both worlds.

[jharding]

Just to update anyone who may be perusing this issue, namespaced events ended up not working out so I accepted #207 to resolve this issue.

[stylenclass]

@jharding so how do you access dataset name now?

.on('typeahead:selected', function($e, data, data_set) {

?

[jharding]

That's correct and it'll be available in the next version of typeahead.js.

[steswinbank]

When is version 0.9.3 going to be available? Would be good to get this data-set name fix. The solution I've been using to get the data-set name, as mentioned in #130 using Jquery parent() and find() to extract data-set name from the markup, fails if there is a hyphen in the value property of the datum. For some reason, the div.tt-suggestion does not remain after typeahead:selected or typeahead:autocompleted events fire for a value that includes a hyphen. div.tt-suggestion does remain for values that do not include a hyphen.

e.g. value selected: "Typeahead",
markup:

<span class="tt-dropdown-menu">
    <div class="tt-dataset-{{name}}">
       <span class="tt-suggestions">
          <div class="tt-suggestion"></div>
      </span>
    </div>
</span>

e.g2. value selected: "Twitter-Typeahead",
markup:

<span class="tt-dropdown-menu">
    <div class="tt-dataset-{{name}}">
       <span class="tt-suggestions">
          [notice the missing tt-suggestion!]
      </span>
    </div>
</span>

Many thanks
Ste

[jharding]

When is version 0.9.3 going to be available?

Hoping to get it out this weekend. I've been dealing with moving to a new city over the past 2 months so I haven't had a lot of time to work on typeahead.js. I'm starting to get settled though so development on typeahead.js should start to pick up.

[gitmar]

I fail to use Breeze in lieu of Ajax for remote service perhaps because I'm not a super coder. Is it possible to open remote function or augment custom events for more customizing data fetch from server?
I think that calling data once from server can reduce performance client side if you've billions articles to query. An event like (datum not found) based on (max-length input) and (limit parameter) will permit to re-query the server and fetch data as requested by each input context.

[brianmhunt]

@gitmar there is a pull request I posted that might do what you are asking here: #220 (bear in mind though that what is ultimately put into the master branch may go a different direction, but this ought to serve in the interim and a few people are using it in production environments).

[lteu]

2 years have been passed and we still cannot have .on('typeahead:selected', function($e, data, data_set) {} as a solution. That's really absurd!