Dynamic autocomplete pada Yii

Kita mungkin pernah memiliki kebutuhan membuat autocomplete yang dinamis pada jQueryUI menggunakan framework Yii. Sebagai contoh kita menginput nama dan muncul autocomplete nama dari berbagai orang. Kemudian setelah memilih orang, kita mungkin ingin menginput nomor handphonenya. Dan pada nomor handphonenya itu kita ingin memilih juga nomor handphone yang pernah kita input. Pada artikel kali ini kita akan membahas bagaimana menangani autocomplete yang nilainya ditentukan oleh field yang lain.

Prinsip pada pembuatan autocomplete yang dinamis ini adalah membuat autocomplete yang on the fly, jadi creationnya terjadi saat dibutuhkan. Untuk lebih jelasnya mari kita perhatikan langkah-langkahnya

1. Membuat auto complete pertama:
   
   

           <div class=”form-group”>
           <?php echo $form->labelEx($model,’participant_name’); ?>
           <div class=”<?php  echo $column_input_class;?>”>
               <?php //echo $form->textField($model,’participant_name’);
            $this->widget(‘zii.widgets.jui.CJuiAutoComplete’, array(
                 ‘name’=>’EventParticipant[participant_name]’,
               ‘sourceUrl’ => array(‘sarannama’,’event_id’=>$model->event_id),
               ‘value’ => ($model->participant_name) ? $model->participant_name : “”,
               ‘options’ => array(
                   ‘showAnim’ => ‘fold’,
                   ‘minLength’=>’2’,
               ),
           ))
                ?>
               <?php echo $form->error($model,’participant_name’); ?>
           </div>
       </div>

2. Mengaktifkan autocomplete yang dinamis:
   

   function saran_hp()
   {
       var nama = $(“#EventParticipant_participant_name”).val();
       var sumberhp = “saranphone/nama/” + encodeURI(nama);    
       
       if ($(“#phone_auto_complete”).val()==’on’)
       {
           $(“#EventParticipant_phone”).autocomplete(‘destroy’);
       }
       else
       {
           $(“#phone_auto_complete”).val(‘on’);
       }
       $(“#EventParticipant_phone”).autocomplete({
         source: sumberhp,
         minLength: 1,
       });    
   }

   

          <div class=”form-group”>
       <input type=”hidden” id=”phone_auto_complete” value=’off’>
           <?php echo $form->labelEx($model,’phone’); ?>
           <div class=”<?php  echo $column_input_class;?>”>
               <?php echo $form->textField($model,’phone’,array(‘size’=>50,’maxlength’=>50,’onFocus’=>’saran_hp();’)); ?>
               <?php echo $form->error($model,’phone’); ?>
           </div>
       </div>

3. Controller terkait:
      
   

       public function actionSarannama()
       {
           $connection=Yii::app()->db;
           
           $word=addslashes($_GET[‘term’]);
           if (strlen($word)>1)
           {
               $sql=”SELECT nama
                       FROM daftar_nama
                       WHERE nama like ‘%$word%’
                       order by nama”;
               $dataku=$connection->createCommand($sql)->queryAll();
               foreach ($dataku as $row)
               {
                   $arr[] = array(
                   ‘id’ => $row[‘nama’],
                   ‘value’ => $row[‘nama’],
                   ‘label’ => $row[‘nama’],
                   );
               }

               echo CJSON::encode($arr);                
           }
       }

       public function actionSaranphone()
       {
           $connection=Yii::app()->db;
           
           $word=addslashes($_GET[‘term’]);
           $nama=trim(addslashes($_GET[‘nama’]));
           if (strlen($word)>0 && strlen($nama)>1)
           {
               $sql=”SELECT phone
                       FROM event_participant
                       WHERE participant_name like ‘%$nama%’ AND phone like ‘%$word%’
                       GROUP BY phone
                       order by phone”;
               $dataku=$connection->createCommand($sql)->queryAll();
               foreach ($dataku as $row)
               {
                   $arr[] = array(
                   ‘id’ => $row[‘phone’],
                   ‘value’ => $row[‘phone’],
                   ‘label’ => $row[‘phone’],
                   );
               }

               echo CJSON::encode($arr);                
           }
       }

Informasi lebih lanjut silahkan mengunjungi https://jqueryui.com/autocomplete/ .

Kunjungi www.proweb.co.id untuk menambah wawasan anda.