Issues integrating bootstrap-tagsinput, boostrap3-typeahead and Bloodhound

Question

My fiddle is here.

I'm extending the example in the Fiddle here based on this answer to work with Bloodhound.

I'm prefetching the data using the following snippet:

prefetch_url='https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/assets/cities.json';

var cities = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: prefetch_url,
    ttl:1
});

cities.initialize();

This is based on the example here.

I've modified the typeahead within tagsinput() to get and use the text and value fields appropriately.

I have the following problems:

1. The size of the textbox keeps changing.
2. If I type in the textbox, I receive an Uncaught TypeError: sync is not a function from the bloodhound.js file.

I'd like the textbox to populate based on the cities.json. Thus, if I enter Amsterdam and Washington, I should see $("#myBox").val() = "1,4".

I think I may be wrongly mixing different versions of typeahead, but I've tried several combinations of JS files without any luck.

Answer 1

Your first issue is a simple css fix. The following css will make your Textbox match the parent element width. If you prefer a fixed width instead just set a fixed value

/* match parent element width */
.bootstrap-tagsinput {
  width: 100%;
}

/* alternatively set a fixed width */
.bootstrap-tagsinput {
  width: 320px;
}

The second problems wa located in some misconfiguration. You missed to set the properties itemValue and itemText of the tagsinput plugin. I also added a method which populates your selected cities. If you don't need this feature just remove the method populateValues().

Surly there is some room to improve this implementation but this could be easily done by yourself, right?

Edit: After further debugging using a promise seems to fix OPs issues mentioned in comments.

You can find a working example here: http://jsfiddle.net/21fbf1L8/3/

Example Repo: https://github.com/gearsdigital/so-questions-38493752-