Wikiki / bulma-extensions

This repository provides a simple access to all of my extensions for Bulma.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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