README.md

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);
}</span>
</pre></div>

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');
insert  into city(id,name) values (61,'Bandung');
insert  into city(id,name) values (73,'Bangkok');
insert  into city(id,name) values (106,'Bangli');
insert  into city(id,name) values (60,'Banten');
insert  into city(id,name) values (107,'Bedugul');
insert  into city(id,name) values (78,'Blok M');
insert  into city(id,name) values (68,'Bogor');
insert  into city(id,name) values (36,'Bugis');
insert  into city(id,name) values (72,'Cairnes');
insert  into city(id,name) values (8,'Candidasa');
insert  into city(id,name) values (23,'Canggu');
insert  into city(id,name) values (79,'Cengkareng');
insert  into city(id,name) values (30,'Central Jakarta');
insert  into city(id,name) values (34,'Changi');
insert  into city(id,name) values (33,'Chinatown');
insert  into city(id,name) values (80,'Cibubur');
insert  into city(id,name) values (81,'Ciputat');
insert  into city(id,name) values (35,'Clarke Quay');
insert  into city(id,name) values (62,'Dago');
insert  into city(id,name) values (20,'Denpasar');
insert  into city(id,name) values (53,'DKI Jakarta');
insert  into city(id,name) values (40,'East Coast');
insert  into city(id,name) values (57,'East Jakarta');
insert  into city(id,name) values (49,'Flores');
insert  into city(id,name) values (82,'Gajah Mada');
insert  into city(id,name) values (39,'Geylang');
insert  into city(id,name) values (15,'Gianyar');
insert  into city(id,name) values (83,'Glodok');
insert  into city(id,name) values (84,'Grogol');
insert  into city(id,name) values (45,'Holland');
insert  into city(id,name) values (9,'Jimbaran');
insert  into city(id,name) values (44,'Jurong');
insert  into city(id,name) values (43,'Kallang');
insert  into city(id,name) values (85,'Kelapa Gading');
insert  into city(id,name) values (86,'Kemang');
insert  into city(id,name) values (87,'Kemayoran');
insert  into city(id,name) values (88,'Kepulauan Seribu');
insert  into city(id,name) values (108,'Keramas');
insert  into city(id,name) values (19,'Kerobokan');
insert  into city(id,name) values (25,'Kintamani');
insert  into city(id,name) values (109,'Klungkung');
insert  into city(id,name) values (89,'Kuningan');
insert  into city(id,name) values (6,'Kuta');
insert  into city(id,name) values (66,'Labuan Bajo');
insert  into city(id,name) values (90,'Lebak Bulus');
insert  into city(id,name) values (7,'Legian');
insert  into city(id,name) values (26,'Lembongan Island');
insert  into city(id,name) values (32,'Little India');
insert  into city(id,name) values (51,'Lombok');
insert  into city(id,name) values (11,'Lovina Beach');
insert  into city(id,name) values (63,'Makassar');
insert  into city(id,name) values (91,'Mampang');
insert  into city(id,name) values (92,'Mangga Besar');
insert  into city(id,name) values (93,'Mangga Dua');
insert  into city(id,name) values (37,'Marina Bay');
insert  into city(id,name) values (52,'Mataram');
insert  into city(id,name) values (67,'Maumere');
insert  into city(id,name) values (64,'Medan');
insert  into city(id,name) values (110,'Menjangan Island');
insert  into city(id,name) values (94,'Menteng');
insert  into city(id,name) values (95,'Monas');
insert  into city(id,name) values (24,'Munduk');
insert  into city(id,name) values (28,'Negara');
insert  into city(id,name) values (54,'North Jakarta');
insert  into city(id,name) values (41,'Novena');
insert  into city(id,name) values (5,'Nusa Dua');
insert  into city(id,name) values (111,'Nusa Penida');
insert  into city(id,name) values (38,'Orchard');
insert  into city(id,name) values (69,'Padang');
insert  into city(id,name) values (112,'Padang Bai');
insert  into city(id,name) values (71,'Palembang');
insert  into city(id,name) values (46,'Papua');
insert  into city(id,name) values (96,'Pasar Baru');
insert  into city(id,name) values (97,'Pasar Minggu');
insert  into city(id,name) values (17,'Pekutatan');
insert  into city(id,name) values (14,'Pemuteran');
insert  into city(id,name) values (98,'Pluit');
insert  into city(id,name) values (50,'Pulau Padar');
insert  into city(id,name) values (48,'Pulau Sangeang');
insert  into city(id,name) values (99,'Rawamangun');
insert  into city(id,name) values (100,'Roxy');
insert  into city(id,name) values (3,'Sanur');
insert  into city(id,name) values (65,'Semarang');
insert  into city(id,name) values (4,'Seminyak');
insert  into city(id,name) values (101,'Senayan');
insert  into city(id,name) values (102,'Senen');
insert  into city(id,name) values (42,'Sentosa');
insert  into city(id,name) values (113,'Sidemen');
insert  into city(id,name) values (31,'Singapore');
insert  into city(id,name) values (27,'Singaraja');
insert  into city(id,name) values (55,'South Jakarta');
insert  into city(id,name) values (103,'Sudirman');
insert  into city(id,name) values (59,'Sukabumi');
insert  into city(id,name) values (47,'Sumbawa');
insert  into city(id,name) values (70,'Surabaya');
insert  into city(id,name) values (12,'Tabanan');
insert  into city(id,name) values (21,'Tanah Lot');
insert  into city(id,name) values (104,'Tebet');
insert  into city(id,name) values (105,'Thamrin');
insert  into city(id,name) values (13,'Tuban');
insert  into city(id,name) values (29,'Tulamben');
insert  into city(id,name) values (10,'Ubud');
insert  into city(id,name) values (16,'Uluwatu');
insert  into city(id,name) values (18,'Umalas');
insert  into city(id,name) values (56,'West Jakarta');
insert  into city(id,name) values (58,'Yogyakarta'); 


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


    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.