یکی از مهمترین عناصر مورد استفاده در صفحات وب فرم‌ها می‌باشد، که تقریباً هر برنامه‌ی کاربردی تحت وب شامل تعدادی فرم برای ایجاد و تغییر عناصر مورد نظر است. از این رو می‌توان گفت ایجاد فرم‌های کارآمد و قابل استفاده برای کاربر از اهمیت بسزایی برخوردار است.

 به منظور استفاده‌ی آسان‌تر و بهتر از فرم‌ها ترفندهایی وجود دارد که در این مقاله می‌خواهیم یکی از مهم‌ترین آنها یعنی «قابلیت پیشبینی خودکار» را معرفی کنیم.

 در این مطلب، نحوه‌ی پیاده‌سازی سیستم پیش‌بینی خودکار (Auto Complete) را با استفاده از تکنولوژی های Zend ،jQuery UI ،AJAX توضیح خواهیم داد. برای درک بهتر موضوع، لازم است تا برخی مفاهیم مقدماتی لازم برای ایجاد چنین سیستمی معرفی شود. ابتدا مثالی عینی را طرح کرده و سپس مرحله به مرحله پیاده‌سازی آن را تشریح خواهیم کرد.

مثال عینی

 فرض کنید اطلاعات تعدادی هنرمند در پایگاه داده‌ی سرور ذخیره شده‌اند و می‌خواهیم در فرم ایجاد آلبوم عنصر نام هنرمند را تکمیل کنیم. هنرمند انتخابی باید از میان هنرمندان موجود در پایگاه داده باشد و سیستم پیش‌بینی کننده باید قابلیت پیش‌بینی هنرمند و تکمیل آن را داشته باشد (مطابق فرم زیر).

حال به بررسی ابزارهای مورد نیاز برای پیاده‌سازی چنین سیستمی می‌پردازیم.

فرم در Zend

 هر فرم شامل تعدادی عنصر است که هر عنصر آن دارای یک برچسب (Label) و یک مقدار (Value) است. همچنین دکمه‌ی ارسال برای فرستادن اطلاعات به تابع مورد نظر برای پردازش نیز وجود دارد.

 برای ایجاد یک عنصر در فرم به وسیله ی Zend از روش زیر استفاده می کنیم:

$this->addElement('text', 'artist', array(

'label' => "Artist:",

'description' =>'Enter the artist name:',

'value' => ''",

'required' => true,

'filters' => array('StringTrim'),

'validators' => array(array('validator' =>

'StringLength', 'options' => array(0, 60)))

));

که عنصری در فرم با نام artist و بدون مقدار پیش‌فرض ایجاد می‌کند.

استفاده از jQuery UI – ایجاد پیش بینی خودکار

 حال به بررسی فایل HTML صفحه‌ی ایجاد آلبوم می‌پردازیم. در ابتدا، لازم است که فایل‌های .css ,.js مربوط به jQuery UI را در ابتدای صفحه اعلان کنید:

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

<script src="/js/jquery-1.10.2.js"></script>

<script src="/js/jquery-ui-1.10.4.custom.min.js"></script>

سپس، نوبت به نوشتن اسکریپتی برای ایجاد پیش‌بینی کننده در فرم است.

در این اسکریپت فیلد id = artist را انتخاب کرده و با استفاده از تابع auto complete در jQuery UI برای این عنصر  قابلیت پیش بینی ایجاد میکنیم. این تابع url مربوط به واکشی هنرمندان و نام data فرستاده شده به آن (که در اینجا term نام دارد) را دریافت کرده و data را به عنوان عنصر مورد نظر برمیگرداند. در صورت موفقیت آمیز بودن عملیات، آن هنرمند را در فیلد مورد نظر به نمایش می گذارد.

<script>
$(function() {
$( "#artist" ).autocomplete({
source: function( request, response ) {
    $.ajax({
        url: "/artist/autocomplete",
        data: {term: request.term},
        dataType: "json",
        success: function( data ) {
            response( $.map( data.myData, function( item ) {
                return {
                    label: item.label,
                    value: item.value
                }
            }));
        }
    });
}
});
});
</script>

 کد PHP و ZEND مربوط به پیش بینی‌گر خودکار

 همانطور که می بینید در بخش url ، تابع را به /artist/autocomplete ارجاع داده و پارامتر ترم (کلمه ی وارد شده توسط کاربر) را نیز به عنوان آرگومان به این تابع فرستاده ایم. این تابع وظیفه ی جستجو در پایگاه داده برای یافتن هنرمندانی با نام شبیه به کلمه ی تایپ شده توسط کاربر را دارد.

public function autocompleteAction() {

$request = $this->getRequest();

$term = $request->getParam('term');

$artist_model = new Application_Model_Artist();

$entries = $artist_model->search('name',$term);

$result = array();

$result['myData'] = array();

foreach ($entries as $entry) {

$result['myData'][] = array('label'=> $entry->$column, 'value'=>$entry->$column);

}

echo json_encode($result);

exit();

}

همچنین تابع search به صورت زیر پیاده سازی می شود:

public function search($term) { 

$select = $this->getDbTable()->Select();

$select->where("name LIKE ? ",'%' . $term . '%');

return $this->fetchAll($select);

}

بدین ترتیب می توان با استفاده از ابزارهای Zend , Ajax , jQuery UI یک سیستم پیش بینی کننده برای فرم های خود ایجاد نمود. برای اطلاعات بیشتر می توانید به مراجع زیر مراجعه نمایید:

http://api.jqueryui.com/autocomplete/

http://framework.zend.com/manual/1.12/en/zend.form.html