Autocomplete

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.

Quickstart

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!

index.php:

$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',
));

    

AjaxController:

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.

        
DROP TABLE IF EXISTS `city`;

CREATE TABLE `city` (
  `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`)
) ENGINE=InnoDB AUTO_INCREMENT=114 DEFAULT CHARSET=utf8;

/*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, ASP.net
• 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

• Fork Automplete in Github (sintret/autocomplete)

Example Project from original jQuery

• jQuery Tokeninput

Got more examples? Open a pull request.

My Other Projects

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