[EXTENSION] tokeninput


this is the discussion thread for the tokeninput extension.

The current discussion on the extension’s comments, when this thread was created, is about the possibility of using different values for ‘tokenValue’ and ‘propertyToSearch’ (‘id’ and ‘name’) when pre-populating the widget.

The latest suggestions are:

  1. Use a serialized array for the attribute’s value (scoob.junior).

  2. Use an array to map ‘tokenValue’ to ‘propertyToSearch’. I had my concerns about performance for big arrays, but zmilan pointed out correctly that arrays need only contain elements for the values assigned to the attribute.

I prefer not to use serialized array for the simple reason that the data submitted by the widget is a string of values separated by ‘tokenDelimiter’ and as such the value should have the same format and not force the developer to do any conversions of the submitted data. If the developer requires another format, he will have to make the conversions, but in a consistent way, for both setting and reading the value.

Any thoughts, suggestions?

Question posted by finzaiko as a comment on the extension’s page:

It is currently not possible and it will be added in the next version, but it is easy to implement:


[*] Add a public property [font="Courier New"]htmlOptions[/font] to the [font="Courier New"]TokenInput[/font] class

[*] In the function [font="Courier New"]run()[/font], pass the property as a third argument to the [font="Courier New"]CHtml::activeTextField[/font] function call


Now you can pass an [font="Courier New"]htmlOptions[/font] attribute to the widget as you would do with a normal active text field.

I followed your instructions but it still does not work, maybe you can correct me

in TokenInput.php i add this line

public $ htmlOptions;

and run ();

CHtml :: activeTextField echo ($ this-> model, $ this-> attributes, $ this-> htmlOptions);



        'theme' => 'facebook',

                 'htmlOptions' => array ('style' => 'width: 10px;'),




I’d try to change facebook style https://github.com/loopj/jquery-tokeninput/issues/98 its not work too.

I think I have responded too quickly!! Sorry. Actually the active text field is not displayed at all, the plugin creates its own HTML structure and populates the hidden text input element, so the settings in [font="Courier New"]htmlOptions[/font] are not visible.

The correct answer is that the field width is defined through CSS. The easiest way to change it would be to copy one of the provided CSS files, make the required changes and pass its URL to the [font="Courier New"]cssFile[/font] option of the widget.

Please take care of the fact that the plugin uses the [font=“Courier New”]theme[/font] option as a suffix to all CSS class names, so if you use ‘token-input.css’ as a base, the [font=“Courier New”]theme[/font] option must be empty (do not define it), but if you use ‘token-input-facebook.css’, then set [font=“Courier New”]theme[/font] to ‘facebook’. You could also create your own theme by using its name as the suffix to the CSS class names.

Thanks Haykel for your quick response, I try create own theme more explore CSS although I am a little confused :D

  1. change width value of this ul.token-input-list-facebook li input selector to whatever width you want in token-input-facebook.css file

  2. comment out this line in jqueyr.tokeninput.js file (line 441)

//input_box.width(input_resizer.width() + 30);

  1. empty your /assets folder

  2. now textbox size will not change and remain to whatever size you have set in step-01