Search token color

Question

I am using bootstrap search field+tokeninput.

I am trying to get tokens of different colors, and to add the id to each token.

I am using this bootstrap search field:

<input type="text" id="exampleInlineTags" class="token-field" name="search" value="red, green" placeholder="enter text" />

and boostrap tokeninput See the source for bootstrap-tokenfield , everything is working fine, now I need to set predefined colors on token input, just like this: Example of what I am trying to achieve

EDIT : Corrected the grammar of the question as OP mentioned having a bad level of English

Answer 1

If you need a specific id and color assigned based on the value of the token then you could listen for the tokenfield:createtoken event.

However if you need to just cycle colors for the tokens I suggest you use the CSS to achieve your goal. For cycling a pattern of 10 colors you could write:

.token:nth-of-type(10n+1){ ... }

.token:nth-of-type(10n+2){ ... }

...

.token:nth-of-type(10n+10){ ... }