Compatibility with Typeahead.js and Bloodhound.js for TagsInput
jordilanctot opened this issue · comments
Hey,
I am currently working with Laravel 5.6 and am able to use your extensions by making use of the .attach() function you have indicated in many of the discussion threads for bulma-extensions. When trying to integrate Typeahead.js and Bloodhound,js with your TagsInput, the Typeahead and Bloodhound seem to fail but they are working when applied to a regular . I was wondering if you had any insight into this because I figure it is probably a feature other users folks might want to incorporate with your packages.
Here is the packages I am speaking to:
https://github.com/twitter/typeahead.js
This is the sections of code which pertain to working with both packages
In my app.js file I have declared (as indicated in other discussions about your packages when working with Laravel):
window.bulmaTagsinput = require('bulma-extensions/bulma-tagsinput/dist/js/bulma-tagsinput.js');
And inline on the page I have done the following Php:
//This works with Tagsinput
//This works with Typeahead and Bloodhound
And Javascript:
//Tagging
var tags = bulmaTagsinput.attach();
//Typeahead
var allTags = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: {
url: "/tag-names"
}
});
//Eg1. Doesn't Work on the #Tagsinput
$('#Tagsinput').typeahead(null, {
name: 'Tagsinput',
source: allTags
});
//Eg2. Works on the #Typeahead without Tagsinput
$('#Typeahead').typeahead(null, {
name: 'Typeahead',
source: allTags
});
When working with this package and Boostraps Tagsinput discussion boards indicate you should do the following instead of Eg1/Eg2 above:
$('#Tagsinput').tagsinput({
typeaheadjs: {
name: 'allTags',
source: allTags.ttAdapter()
}
});
where it calls the tagsinput function. I have tried doing the same but it appears the function isn't named .bulmaTagsinput as I had expected.
Perhaps I am overlooking something obvious, but hoping to get your package working with the typeahead.js like the following demo:
https://jsfiddle.net/dhirajbodicherla/aawmp3np/305/
Thanks,
Jordi