etagger Yii extension wrapping the jQuery UI Tagger Widget

  1. Requirements
  2. Instalation
  3. Usage
  4. Configuration
  5. Resources

The JQuery UI Tagger widget allows your users to enter a bounded or unbounded list of attributes in a text field in a "comma separated" way. Forming tags in process. For example:


Or in the bounded case:


The tags are formed just after the "," is pressed.


Yii 1.1 or above


Extract the contents of the zip file directly into protected/extensions/


Simple usage
echo CHtml::label("Tags for your post:","widget");
    $this->widget('ext.ETagger.ETagger', array('name'=>'widget'));
Custom options
echo CHtml::label("Enter your 5 favorite car manufacturers:","widget3");
    $this->widget('ext.ETagger.ETagger', array(
        'options'=> array(
            'colorFunction'=>'js:function(label) {
                    switch (label) {
                        case "Ferrari":
                            return {font:"#FFF", background:"#D32232"};
                        case "BMW":
                            return {font:"#FFF", background:"#2F749E"};
                        case "Audi":
                            return {font:"#C1C1C1", background:"#505962"};
                        case "Nissan":
                            return {font:"#FFF", background:"#274A84"};
                            return{font:"#FFF", background:"#318038"};
Linked model
$model = User::model()->findByPk(1);
    $this->widget('ext.ETagger.ETagger', array(
        'options'=> array(

It should work in conjunction with jquery ui autocomplete extension


The following parameters are accepted by the widget:

  • model: the data model associated with this widget
  • attribute: the attribute associated with this widget
  • separator: the separator for the keywords (default=',')
  • name: the name of the input field. This must be set if [model] is not set.
  • keywords: array of data for filling the default values.
  • width: width of the resulting element, css valid (ex: "500px")
  • limit: int number of tags to be allowed
  • tagClass: name of the CSS class to be applied to each tag (span element) (default='tag')
  • taggerWrapperClass: name of the CSS class to the tag container (div element) (default='tagger-input-container')
  • options: array of additional options for the jQuery UI Tagger Widget. Please refer to the wiki in the project page for more info on this options
  • useDefaultCSS: boolean that tells the extension if it should load a default set of styles for the tags and their container (default=true). Please note that the recommended usage is to set this to false and use [tagClass] and [taggerWrapperClass] to your own styles.


JQuery UI Tagger project page

Demo: TODO

4 0
Yii Version: 1.1
License: BSD-2-Clause
Category: User Interface
Developed by: Denn1s
Created on: May 13, 2012
Last updated: 9 years ago


show all

Related Extensions