bootstrap-tokenfield | jQuery tag/token input plugin | Plugin library

I am using a bootstrap tokenfield. How do I make the width of the autocomplete dropdown the same as the width of the input box? Currently, the width is only a fraction of this ideal width.

Please see code below, to how the autocomplete width is not consistent with the input box width! The tokenfield is in the "launch demo" modal.

can anyone please tell me how add a autocomplete with token field in angular 4.

I want something below like this.

http://sliptree.github.io/bootstrap-tokenfield/

Thanks

We recently changed our rails application from sprockets to webpack, and everything seems to have ported over fine, with the exception of bootstrap-tokenfield. On the dev environment server it says that everything has compiled but the tokenfield is not rendering as it should.

I have tried to switch up the location/name of the corresponding css and I have tried appending the JS library to the environment plugins to no avail.

I would like to have focus on the tokenfield input field when the modal shows up. Currently it's focused only if I click on the input field in the modal.

https://jsfiddle.net/csisanyi/h19Lzkyr/12/

I tried to add the following code

I have tried to reproduce the Using Twitter Typeahead example from http://sliptree.github.io/bootstrap-tokenfield/. I have made only a minimal modifications on the original code.

I am using http://sliptree.github.io/bootstrap-tokenfield/ to let users select multiple keywords and submit it via post request in Django. Here is what a snippet of code looks like:

I am using angular 5 + ngrx/store. I have own tokenfield component. That should work exactly like bootstrap-tokenfield. It look something like this stackblitz. In stackblitz it works as expected, but in my app for some reasons i lose focus after every token added. It seems like pressEnter event trigger lose focus. pressEnter triggers an action in the container:

addToken(token: Token) { this.store.dispatch(new Actions.addToken(token)); }

And then i am passing to the component throw the container tokens:

[tokens]="tokens$ | async"

And here is the function in the reducer that handle this action:

I wrote this script

I have a question similar to this one but I'm using both Tokenfield v0.12.1 and Twitter typeahead v0.11.1. When I start typing and the suggestions appear, they are not styled. It shows as plain text (if I click on suggestion, it adds to input field). For example, if I type "re", the suggestion for "red" appears but it shows unstyled as follows:

{"_query":"re","value":"red","label":"red"}

My CSS source files