Multiple remote datasets

[mcadam]

Hello,

I was wondering if there was a way to use the widget with multiple remote datasets ?
Something like that :

$('#search').typeahead([
{
name: 'tvshows',
remote: url_tvshows+'%QUERY.json'
},
{
name: 'movies',
remote: url_movies+'%QUERY.json'
}
]);

Because right now, the search is only retrieving results from the 'movies' dataset.
I would like to have the results from movies and tvshows datasets...

I hope i am being clear, if you need more details, dont hesitate to ask.

[jharding]

Yeah this is an issue in v0.8.x. The good news is that I think in v0.9.0 this should work. I'll go ahead and add this issue to the v0.9.0 milestone so I remember to verify that this has been fixed.

[alexdesi]

At the moment, is there some workaround to change dynamically the remote property ?
I tried to destroy the typeahead obj:
$('#event_place').typeahead('destroy');
and then reinitialize, but seems not working.

[jharding]

The destroy method only destroys the typeahead instance and not the datasets that back it. So if you wanted to change the backing datasets of a typeahead instance, you'd need to do something like this:

$('.typeahead').typeahead({
  name: 'dataset1',
  remote: { /* ... */ }
});

$('.typeahead').typeahead('destroy');

$('.typeahead').typeahead({
  name: 'dataset2',
  remote: { /* ... */ }
});

Since datasets are identified by the name property, you have to make sure you're using different values for name or just leaving it out of the dataset definition all together.

[alexdesi]

Thank you Jharding, it is how you wrote:
I change the 'name' property each time a dropdown is changed, and it works perfectly!

[jharding]

@mcadam would you mine trying out the bleeding edge version of typeahead.js and letting me know if it resolves your issue? I tested it out myself with multiple datasets that rely on remote queries and it seemed to work.

[mcadam]

I have tried the last version you gave me, and yes it solves my problem. But sometimes the search dont work : as I type in the input, nothing happens... I have got no error, no log for ajax requests. I guess this is still an unstable version so it will be okay with the last version, and maybe it comes from my code ;)

[mcadam]

And also i binded click event in my app like : $('body').on('click', 'myselector', myfunction) to do some custom stuff and stop propagation of click after my action. But for some reason, the click event does not buble up to my element supposed to be catch by my selector, it seems you are breaking the event buble, is it wanted ?

[jharding]

But sometimes the search dont work : as I type in the input, nothing happens... I have got no error, no log for ajax requests.

Network requests are rate-limited, meaning typeahead.js will wait until it seems like the user has settled on a query before firing a request. Also, I'm not sure if you're using local or prefetch data, but if enough suggestions can be retrieved from those sources, typeahead.js won't make any remote requests.

I'll be sure to test this a bit more throughly before the release.

But for some reason, the click event does not buble up to my element supposed to be catch by my selector, it seems you are breaking the event buble, is it wanted ?

I'm unable to reproduce this – I ran the following code alongside a typeahead and everything worked as expected:

$('body').on('click', function() { console.log('click'); });

Where exactly is the click event that's not bubbling originating? The input? The dropdown?

Finally, I've updated the raw gist I linked to earlier to contain the latest wip version of typeahead.js. Perhaps give that a shot and see if it solves any of the issues you mentioned.

[jharding]

Another thing to keep in mind is that the last 10 requests are cached internally by typeahead.js, so you won't see requests firing if you're just alternating between a small pool of queries.

[mcadam]

For my event bubbling problem : if I use

$('body').on('click', function() { console.log(' generic click'); });

I have the log trace no problem here, but if you do something like that :

$('body').on('click', '.myclass', function() { console.log('click using selector'); });

with an element in the dropdown results having the 'myclass' class, I dont see the log...The event fired the log 'generic click' on the click from the higher element in DOM(on which one I clicked), but no log 'click using selector'.

I hope I am being clear, I am french, my english may be bad ;)

[jharding]

That makes sense, I'll test that out later today when I get a chance and report back.

[jharding]

@mcadam the event delegation thing you reported is indeed a bug, I'll try and fix it ASAP.

[jharding]

I created another issue (#118) to track the event delegation limitation.