Membuat CJuiAutoComplete dengan banyak pilihan

Tidak Ada Tanggapan

Di versi yii 1.1.3 widget CAutoComplete sudah deprecated, jadi untuk hasil yang lebih baik anda disarankan menggunakan CJuiAutoComplete.

Nah untuk membuat widget ini di yii lumayan mudah. Tetapi masalahnya jika mau membuat CJuiAutoComplete dengan menggunakan lebih dari satu pilihan nah itu yang akan kita bahas pada artikel kali ini.

Oke anggap kode dari viewnya ada di sini  /protected/views/article/_form.php. Dan saya hanya punya 2 table yang ada di database id_tag and name. Nah ini nantinya akan ane simpan dalam model Tag. Langsung saja bagaimana caranya kita membuat CJuiAutoComplete pada yii

<div class="row">
  <?php echo CHtml::script("
      function split(val) {
       return val.split(/,\s*/);
      }
      function extractLast(term) {
       return split(term).pop();
      }
    ")?>
  <?php $this->widget('zii.widgets.jui.CJuiAutoComplete', array(
    'model'=>$model,
    'attribute'=>'tag',
    'source'=>"js:function(request, response) {
       $.getJSON('".$this->createUrl('suggest')."', {
         term: extractLast(request.term)
       }, response);
       }",
    'options'=>array(
      'delay'=>300,
      'minLength'=>2,
      'showAnim'=>'fold',
      'select'=>"js:function(event, ui) {
          var terms = split(this.value);
          // remove the current input
          terms.pop();
          // add the selected item
          terms.push( ui.item.value );
          // add placeholder to get the comma-and-space at the end
          terms.push('');
          this.value = terms.join(', ');
          return false;
        }"
    ),
    'htmlOptions'=>array(
      'size'=>'40'
    ),
   ));?>
  <?php echo $form->labelEx($model,'tag'); ?>
  <?php echo $form->hiddenField($model,'tag',array('rows'=>6, 'cols'=>50)); ?>
  <?php echo $form->error($model,'tag'); ?>
 </div>

dan buat actionnya di controller /protected/controller/ArticleController.php .

public function actionSuggest(){
  if (Yii::app()->request->isAjaxRequest && isset($_GET['term'])) {
   $models = Tag::model()->suggestTag($_GET['term']);
   $result = array();
   foreach ($models as $m)
    $result[] = array(
      'label' => $m->name,
      'value' => $m->name,
      'id' => $m->id_tag,
    );
  
   echo CJSON::encode($result);
  }
 }

Jangan lupa untuk menambahkan rules suggest nya di rule
Dan di model tag fungsi yang ane pake /protected/models/ Tag.php

public function suggestTag($keyword){
  $tags=$this->findAll(array(
    'condition'=>'nama LIKE :keyword',
    'params'=>array(
      ':keyword'=>'%'.strtr($keyword,array('%'=>'\%', '_'=>'\_', '\\'=>'\\\\')).'%',
    )
  ));
  return $tags;
 }

Oke sekedar simple tutorial untuk membuat CJuiAutoComplete..