Ajax Livesearch with PRADO

Beberapa hari ini saya mencoba untuk bisa mengimplementasikan pembuatan Ajax dengan framework PRADO. Ternyata tidak semudah yang dibayangkan, tapi memang sebenarnya mudah.

Saya ada ide untuk membuat Livesearch, tapi tidak sekedar suggest, seperti halnya google suggest. Disini kita akan membuat livesearch seperti yang ada di Windows Vista. Jadi tinggal ketik, result nya langsung keluar, without button or enter pressed. Ini saya edit dari tutorial blog PRADO.

Ini code untuk tampilannya : LiveSearch.page

<com:TContent ID="Main">

<h3 class="portlet-title">Live-Search</h3>

<div id="load" style="display: none">

<com:TImage ImageUrl="/prado/blog/assets/img/load.gif" /></div>

<com:TAutoComplete ID="Live" OnSuggest="doSearch" >

<prop:ClientSide

OnLoading="Element.show('load')"

OnComplete="Element.hide('load')"/>

</com:TAutoComplete>

<br />

<br />

<com:TActiveLabel ID="LiveSearchLabel" Text="" />

<com:TActivePanel ID="ResultPanel" ActiveControl.EnableUpdate="true">

<com:TRepeater ID="PostList">

<prop:ItemTemplate>

<div class="post">

<com:TActiveHyperLink

Text="<%# $this->Data->title %>"

NavigateUrl="<%# $this->Service->constructUrl('posts.ReadPost',array('id'=>$this->Data->id)) %>" />

</div>

</prop:ItemTemplate>

</com:TRepeater>

</com:TActivePanel>

</com:TContent>

Ini code untuk controlnya : LiveSearch.php

<?php

class SearchPost extends TPage

{

private $criteria;

private $count_result;

public function doSearch($sender, $param)

{
// getToken, if you make OnSuggest...

$key=TPropertyValue::ensureString($param->getToken());

// make some criteria for query ?

$this->criteria = new TActiveRecordCriteria;

$this->criteria->Condition = 'content LIKE :key OR title LIKE :key';

$this->criteria->Parameters[':key'] = '%'.$key.'%';

// send databind ?

$this->PostList->DataSource = $this->matchSearch();

$this->PostList->VirtualItemCount = $this->count_result;

$this->PostList->dataBind();

// to indicate variable $key is update on browser

$this->LiveSearchLabel->Text = "Search ".$this->count_result." results for <b>".$key."</b> :";

$this->ResultPanel->render($param->getNewWriter());

//$this->ResultPanel->focus();

}

public function renderResult($sender, $param)

{

//$this->ResultPanel->render($param->getNewWriter());

}

public function matchSearch()

{

$posts= PostRecord::finder()->findAll($this->criteria);

$this->count_result = count($posts);

return $posts;

}

}

?>

Komponen utama yang kita pakai disini adalah TAutoComplete dan TRepeater. Kegunaannya adalah sebagai alat input tanpa menggunakan tombol (langsung perhuruf yang ditulis) dan TRepeater untuk menampilkan datanya. Sebenarnya kita juga bisa menggunakan TActiveTextBox, tapi perlu ada tambahan javascript-nya. Dan biar lebih menarik, kita tambahkan gambar loading.gif, agar tampak kesan Ajaxnya...

Gimana?

Mudah bukan. Mudah-mudahan bisa bermanfaat. Dan silahkan Anda kembangkan dengan ide masing-masing...

Thank’s untuk bantuan teman-teman di pradosoft.

;D

OMG! it's a great article, Share Oh!