Yii – Autocomplete Dropdown List

Posted: 22 July, 2013 in php, programming

Salam semua, hari ni dah 13 Ramadhan dah, badan pun dah mula letih, perut rasa lapar, kepala rasa berat jer, ni semua lah antara ujian kecil di bulan Ramadhan. Ada yang tanya apa yang special sangat bulan Ramadhan ni, pada aku, bulan ni dimuliakan kerana diturunkan al – Quran padanya. Ok la, cukuplah tu, citer panjang-panjang pun bab ni aku bukannya ustaz. Hehehe

(Masa yang diwajibkan kamu berpuasa itu ialah) bulan Ramadan yang padanya diturunkan Al-Quran, menjadi petunjuk bagi sekalian manusia, dan menjadi keterangan-keterangan yang menjelaskan petunjuk dan (menjelaskan) perbezaan antara yang benar dengan yang salah. Oleh itu, sesiapa dari antara kamu yang menyaksikan anak bulan Ramadan (atau mengetahuinya), maka hendaklah ia berpuasa bulan itu; dan sesiapa yang sakit atau dalam musafir maka (bolehlah ia berbuka, Kemudian wajiblah ia berpuasa) sebanyak hari yang ditinggalkan itu pada hari-hari yang lain. (Dengan ketetapan yang demikian itu) Allah menghendaki kamu beroleh kemudahan, dan Ia tidak menghendaki kamu menanggung kesukaran. Dan juga supaya kamu cukupkan bilangan puasa (sebulan Ramadan), dan supaya kamu membesarkan Allah kerana mendapat petunjukNya, dan supaya kamu bersyukur.

al baqarah : 185

Entri kali ni, aku nak kongsikan macam mana kita nak buat autocomplete dropdown list. Kita akan upgrade sistem emihrab ni. Biarlah orang tak nak pakai atau tak nak appreciate sistem ni, lantak hang la wei! Hehehe.
At least aku dapat jugak brush up skill programming dan belajar benda-benda baru 🙂

Dalam versi yang sebelum ini, kita menggunakan dropdown list yang biasa. Valuenya di populate dari satu table tertentu. Kalau kita tengok gambar dibawah, bila kita pilih nama masjid (dropdown list), dia akan menyenaraikan semua nama masjid yang ada dalam table senarai_masjid. Ini sedikit sebanyak menyukarkan pengguna sistem, sebab perlu scroll satu satu untuk mencari nama masjid yang berkaitan.

autocomplete1

Berikut adalah code untuk tujuan paparan dropdown list yang biasa. (Seperti dalam gambar di atas)

<table>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout=
"this.style.backgroundColor='#d4e3e5';">
<td>
<?php echo $form->labelEx($model,'nama_masjid'); ?>
</td>

<td>
<?php echo $form->dropDownList($model,'nama_masjid', CHtml::listData(SenaraiMasjid::model()->findAll(), 'nama_masjid','nama_masjid'), array(
'empty'=>'PILIH NAMA MASJID',
));
?>
</td>
</tr>
</table>

Sekarang ni, kita buang code dropdown list yang kat atas tu. Kita akan gunakan CJuiAutoComplete. Buat perubahan pada fail _form.php. Berikut adalah code bagi bahagian view.

<table>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout=
"this.style.backgroundColor='#d4e3e5';">
<td><?php echo $form->labelEx($model,'nama_masjid'); ?></td>
<td>
<?php
$this->widget('zii.widgets.jui.CJuiAutoComplete',
array(
'name'=>'namamasjid',
'model'=>$model,
'attribute'=>'nama_masjid',
'source'=>$this->createUrl('ajk/autocomplete'),

'options'=>array(
'showAnim'=>'fold',
),

'htmlOptions'=>array(
'style'=>'width: 400px;',
),
));
?>
</td>
</tr>
</table>

Pada bahagian controller pulak, kita taipkan code seperti dibawah. Untuk contoh ni aku gunakan ajk controller. Dan ingat kita perlu declarekan nama function yang kita buat ni dalam function access rule.

public function actionAutocomplete() {
$res =array();

if (isset($_GET['term'])) {
$qtxt ="SELECT nama_masjid FROM senarai_masjid WHERE nama_masjid LIKE :nama_masjid";
$command =Yii::app()->db->createCommand($qtxt);
$command->bindValue(":nama_masjid", '%'.$_GET['term'].'%', PDO::PARAM_STR);
$res =$command->queryColumn();
}

echo CJSON::encode($res);
Yii::app()->end();
}

Dan hasilnya adalah seperti dalam gambar dibawah. Jadi pengguna tak perlu nak scroll satu-satu nama masjid seperti sebelum ni, hanya taipkan nama masjid (keyword), dan sistem akan paparkan nama masjid yang berkaitan.

autocomplete2

autocomplete3

System Developer berhempas pulas memikirkan dan upgrade sistem supaya memudahkan pengguna hingga ke peringkat maksimum, tapi selalunya pengguna sistem macam hampeh, bukannya nak guna sistem. Bila sistem tak der bukan main suh buat. Ini lah lumrah manusia. Biarkan.. Biarkan.. Biarkan..

Happy h4ckin dari pokcik gh1mau 🙂

dilbert-strip

Advertisements
Comments
  1. john jesus says:

    tengo un dropdowlist y se llena con datos de una tabla quiero que al seleccionar una opcion me llene un texbox con el dato relacionado del dropdowlist de otra tabla como le pudiera hacer estoy trabajando un yii framework

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s