Implement Autocomplete in YII PHP Framework

In this article, we are going to discuss about How to implement Ajax autocomplete in YII PHP Framework. YII is one of the most popular PHP Framework. Autocomplete, or word completion, is a feature provided by many web browsers, e-mail programs, search engine interfaces, source code editors, database query tools, word processors, and command line interpreters. Here is the tutorial to implement the Autocomplete in YII framework.

We are going to implement the Autocomplete in YII 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!

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/Yiifolder

Features

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