Autocomplete-facebook is a autocomplete extensions to Yii Framework using Tokeninput jQuery plugin.


Autocomplete is a autocomplete extensions to Yii Framework using Tokeninput jQuery plugin.

Tokeninput is a jQuery plugin which allows your users to select multiple items from a predefined list, using autocompletion as they type to find each item. You may have seen a similar type of text entry when filling in the recipients field sending messages on facebook.


To get started, we'll create a table city that will accept connections, then send back messages, json_encode result.

To show how simple it is, let's do it in site/index!


$array[] = array('id' => 1, 'name' => 'Bali');
$array[] = array('id' => 2, 'name' => 'Singapore');

$this->widget('application.extensions.autocomplete.AutoComplete', array(
    'theme' => 'facebook',
    'name' => 'searchCity',
    //'prePopulate' => CJavaScript::encode($array),
    'sourceUrl' => Yii::app()->createUrl('ajax/city'),
    'hintText' => 'Try Typing places',
        //'htmlOptions' => array('class' => 'form-control', 'placeholder' => 'Try Typing Places'),
        //'widthInput' => '50px',
        //'widthToken' => '250px',



public function actionCity()
        // search keyword from ajax
        $q = $_GET['q'];

        $rows = array();

        $sql = 'SELECT id, `name` FROM city WHERE `name` LIKE "%' . $q . '%"';
        $rows = Yii::app()->db->createCommand($sql)->queryAll();
        if ($rows)
            echo CJSON::encode($rows);

Finally, let's create a table city to test it.


  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL DEFAULT '',
  PRIMARY KEY (`id`),
  UNIQUE KEY `idx_name_countryCode` (`name`),
  KEY `idx_name` (`name`)

/*Data for the table `city` */

insert  into `city`(`id`,`name`) values (76,'Airport Soekarno Hatta');
insert  into `city`(`id`,`name`) values (22,'Amed');
insert  into `city`(`id`,`name`) values (77,'Ancol');
insert  into `city`(`id`,`name`) values (75,'Badung');
insert  into `city`(`id`,`name`) values (1,'Bali');


Open this page in your web-browser. It will even work if you open it directly from disk using a localhost/yourrootname

More Features

  • Very simple install. Just download add your folder extensions.
  • Intuitive UI for selecting multiple items from a large list
  • Easy to skin/style purely in css, no images required
  • Supports any backend which can generate JSON, including PHP, Rails, Django,
  • Smooth animations when results load
  • Select, delete and navigate items using the mouse or keyboard
  • Client-side result caching to reduce server load
  • Crossdomain support via JSONP
  • Callbacks when items are added or removed from the list
  • Preprocess results from the server with the onResult callback
  • Programatically add, remove, clear and get tokens
  • Customize the output format of the results and tokens

User Manual

Example Project from original jQuery

Got more examples? Open a pull request.

My Other Projects

Visit tourexplora to see and subscribe to other thingies I make.

Total 3 comments

#15844 report it
julianz at 2013/12/22 04:09am
clicked the mouse over a link

how the results can be clicked the mouse over a link such as having

#15793 report it
sintret at 2013/12/18 02:58am
re: error in js file

Thanks for your feedback gobinath, but i could not make sure your error scripting. maybe you can use your own jquery so comment in line 70 //$cs->registerCoreScript('jquery'); and update jquery new version.

#15792 report it
gobinath at 2013/12/18 02:40am
error in js file

It shows error like "TypeError: value is undefined" on line number 657

Leave a comment

Please to leave your comment.

Create extension