Skip navigation


Untuk memenuhi permintaan dari Jupri yang atas permintaan di bagian Request yang meminta tutorial bagaimana cara membuatautocomplete”seperti facebook”.

Autocomplete textfield adalah sebuah textfield yang ketika diberikan input sebuah string maka textfield itu akan menampilkan beberapa hasil rekomendasi. Contoh yang sering terlihat adalah autocomplete di Facebook search ataupunsearch suggestiondi Google Search.

Contoh penggunaan autocomplete untuk Facebook search.

Di Yii sendiri sudah ada komponen bawaan yang mendukung pembuatan fitur autocomplete seperti ini. Komponen ini adalah CJuiAutoComplete (sebelumnya sudah ada CAutoComplete yang kemudian dihentikan pengembangannya). Komponen CJuiAutoComplete tidak lain merupakan pembungkus dari widget jQuery UI – Autocomplete. Kematangan widget ini membuat pengembang Yii menghentikan komponen CAutoComplete dan beralih menggunakan jQuery UI.

Oke, sekarang kita coba menggunakan komponen CJuiAutoComplete ini. Kita buat sebuahcontrollersederhana seperti di bawah.

<?php

/**
 * @filesource /protected/controllers/201204/SiteController.php
 */
class SiteController extends Controller {

	public function actionIndex() {
		$this->render('index');
	}

}

Kemudian kita membuatviewyang sesuai yakni index.

<?php

/**
 * @filesource /protected/views/201204/site/index.php
 */
$this->widget('zii.widgets.jui.CJuiAutoComplete', array(
    'name' => 'user',
    'sourceUrl' => $this->createUrl('lookup'),
    'options' => array(
	'minLength' => '2',
    ),
    'htmlOptions' => array(
	'style' => 'height:20px;'
    ),
));
?>

Bisa dilihat di atas cara untuk mendeklarasikan widget CJuiAutoComplete beserta atribut-atributnya seperti name, sourceUrl, options, htmlOptions. Penjelasan atribut-atribut tersebut bisa dilihat di halaman CJuiAutoComplete. Yang perlu diperhatikan sekarang adalah bagian sourceUrl. Ini mendefinisikan lokasi di mana data sumber autocomplete tersebut berada. Di sini untuk sementara kita definisikan di action Lookup.

Jika kita jalankan tampilannya akan berbentuk seperti ini.

Tampilan awal CJuiAutoComplete

Kalau kita mengisi tulisan di situ, tidak akan terjadi apa-apa. Kenapa? Karena kita masih belum mendefinisikan tempat asal data untuk autocomplete tersebut.

Sebenarnya apa yang terjadi ketika kita mengisi data di textfield tersebut? Ketika kita mengisi string di textfield, textfield akan mengirim HTTP request ke server di alamat yang didefinisikan di atribut sourceUrl. Kalau diintip melalui Firebug akan terlihat seperti ini.

Tampilan Firebug

Bisa dilihat di screenshot di atas. Terjadi kegagalan karena URL sumber data tidak ditemukan. Sekarang mari kita definisikan URLnya. Kita tinggal menambahkanactionbaru di controller yang kita buat di atas.

<?php

/**
 * @filesource /protected/controllers/201204/SiteController.php
 */
class SiteController extends Controller {

	/**
	 * Renders the autocomplete.
	 */
	public function actionIndex() {
		$this->render('index');
	}

	/**
	 * Returns data for the autocomplete lookup.
	 */
	public function actionLookup() {
		//get search string from the autocomplete
		$term = $_GET['term'];
		//define the static data pool
		$data = array(
		    'Arya Stark',
		    'Cersei Lannister',
		    'Daenarys Targaryen',
		    'Robb Stark',
		    'Bran Stark',
		    'Rickard Karstark',
		    'Tyrion Lannister',
		);
		//filter the data
		$return = array_values(array_filter($data, function($element) use ($term) {
					return (stripos($element, $term) !== false);
				}));
		//return as
		echo CJSON::encode($return);
	}

}

Sumber data untuk autocomplete ini bisa dilihat di action actionLookupi. Baris pertama dari method tersebut adalah untuk mendapatkan string yang dikirim oleh autocomplete. Dan baris kedua mendefinisikan array untuk data statis yang akan digunakan sebagai nilai kembalian. Lalu baris selanjutnya adalah algoritma untuk mengembalikan elemen-elemen dari array tersebut yang memiliki substring yakni term yang dikirim oleh autocomplete menggunakan fungsi array_filter. Dan baris terakhir mengembalikan data terfilter tersebut sebagai JSON.

Hasilnya bisa dilihat sepertiscreenshotdi bawah.

Hasil akhir Autocomplete sederhana

Seperti yang dilihat di atas, ketika textfield diberi input “Stark”, maka action actionLookup akan mengembalikan JSON string yang isinya elemen-elemen yang memiliki string “Stark” sebagai substring (perhatikan string “Rickard Karstark” juga termasuk karena menggunakan fungsi stripos). Kemudian script milik CJuiAutoComplete ini akan menerima JSON string tersebut dan menampilkan elemen-elemen tersebut sebagai autocomplete.

Beginilah implementasi autocomplete menggunakan CJuiAutoComplete secara sederhana. Fitur ini masih bisa dikembangkan lagi antara lain

  • Bagaimana menyambungkan autocomplete dengan database.
  • Bagaimana meletakkan autocomplete di sebuah form (termasuk active form).
  • Bagaimana mengubah tampilan suggestion di autocomplete (memberi gambar dst).
  • Bagaimana membuat widget untuk autocomplete sehingga bisa diletakkan di semua halaman.
  • Dan masih banyak lagi.

Anyway, kodenya bisa dilihat di sini.

Sekarang saya mau tidur. Good night!

One Comment

  1. Reblogged this on erycamel.


One Trackback/Pingback

  1. […] dalam Easy, PHP, Snippets, Web Programming Setelah di postingan sebelumnya menjelaskan tentang cara penggunaan CJuiAutoComplete secara sederhana, postingan ini akan mencoba […]

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: