Yii autocomplete widget example

Yii is simple. Yii is nice. Yii is coder-friendly. No, this is not a commercial brake, just my 2 cents regarding recent framework switching from CodeIgniter and Zend. I’m not gonna delve deep into the features it has, instead I’ll describe one witch I liked really really much. It gave me the possibility to quickly give a client the sight for sore eyes regarding one-to-many or many-to-many form populating.

In this example I will describe one-to-many example and you can pick up the pieces for something more complicated.

Ok, so we have let’s say Hotel as a model and Hotel Offer as something that can relate to only one Hotel. On the Hotel Offer create/update interface we would want to allow client to select one of many Hotels in the system. So, the first approach was a drop down field but after populating the database with more then 10 hotels this was not a viable solution. Ergo, the first insight to CJuiAutoComplete was made. After some example scanning and some self-proclaimed coding I came to a solution which is presented below:

protected/controllers/HotelController.php

public function actionAutocomplete () {
  if (isset($_GET['term'])) {
    $criteria=new CDbCriteria;
    $criteria->alias = "hotels";
    $criteria->condition = "hotels.name like '" . $_GET['term'] . "%'";

    $dataProvider = new CActiveDataProvider(get_class(Hotel::model()), array(
'criteria'=>$criteria,‘pagination’=>false,
));
    $hotels = $dataProvider->getData();

    $return_array = array();
    foreach($hotels as $hotel) {
      $return_array[] = array(
                    'label'=>$hotel->name,
                    'value'=>$hotel->name,
                    'id'=>$hotel->id,
                    );
    }

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

A condition parameter of the CDbCriteria class can be tweaked if maybe I would want to include all results which include the letters type in the resulting auto complete drop down, not just those beginning with. Also don’t forget to add ‘autocomplete’ action to the ACL rules in the accessRules method.

Now we need to prepare the Hotel Offer. CJuiAutoComplete widget has one downside and that’s that it has to use the existing attribute of the model. Now, I haven’t find a way to specify the attribute as a relational field to some other model, so we have to add a hotels_name field in the HotelOffer model.

protected/models/HotelOffer.php

class HotelOffer extends CActiveRecord {
  public $hotels_name;

....

  public function afterFind() {
$this->hotels_name = $this->hotel->name;
  }
}

Now, all we need is to put the widget into the Hotel Offer form and we’re done for the day 🙂

protected/views/hotelOffer/_form.php

<div>
  <?php echo $form->label($model,Yii::t('messages','Hotel Name')); ?>
  <?php echo $form->hiddenField($model,'hotels_id',array()); ?>
  <?php $this->widget('zii.widgets.jui.CJuiAutoComplete',
    array(
      'model'=>$model,
      'attribute'=>'hotels_name',
      'source'=>$this->createUrl('hotel/autocomplete'),
      'htmlOptions'=>array('placeholder'=>'Any'),
      'options'=>
         array(
               'showAnim'=>'fold',
               'select'=>"js:function(hotel, ui) {
                  $('#HotelOffer_hotels_id').val(ui.item.id);
                         }"
                ),
      'cssFile'=>false,
    )); ?>
</div>