Использование CJuiAutoComplete

Решил написать пример использования виджета CJuiAutoComplete.
Для работы виджета, его необходимо сконфигурировать, затем подключить в нужном месте и написать экшен из которого будут получены данные(не обязательно источником данных для виджета должен быть экшен).
Конфигурируем виджет:

$autocompleteConfig = array(
    'model'=>$model, // модель
    'attribute'=>'customer', // атрибут модели
    // "источник" данных для выборки
    // может быть url, который возвращает JSON, массив
    // или функция JS('js: alert("Hello!");')
    'source' =>Yii::app()->createUrl('customers/autocomplete'),
    // параметры, подробнее можно посмотреть на сайте
    // http://jqueryui.com/demos/autocomplete/
    'options'=>array(
        // минимальное кол-во символов, после которого начнется поиск
        'minLength'=>'2',
        'showAnim'=>'fold',
        // обработчик события, выбор пункта из списка
        'select' =>'js: function(event, ui) {
            // действие по умолчанию, значение текстового поля
            // устанавливается в значение выбранного пункта
            this.value = ui.item.label;
            // устанавливаем значения скрытого поля
            $("#Order_customer_id").val(ui.item.id);
            return false;
        }',
    ),
    'htmlOptions' => array(
        'maxlength'=>50,
    ),
);

Подключаем виджет в отображении:

<?php $form = $this->beginWidget('CActiveForm', array(
    'id'=>'order-form',
)); ?>
<div class="row">
    <?php echo $form->label($model,'customer'); ?>
    <?php $this->widget('zii.widgets.jui.CJuiAutoComplete', $autocompleteConfig); ?>
    <?php echo $form->hiddenField($model,'customer_id', array('style'=>'display: none;')); ?>
</div>
<?php $this->endWidget(); ?>

Пример контроллера:

    public function actionAutocomplete() {
        $term = Yii::app()->getRequest()->getParam('term');

        if(Yii::app()->request->isAjaxRequest && $term) {
            $criteria = new CDbCriteria;
            // формируем критерий поиска
            $criteria->addSearchCondition('fullName', $term)
            $customers = Customer::model()->findAll($criteria);
            // обрабатываем результат
            $result = array();
            foreach($customers as $customer) {
                $lable = '№'.$customer['id'].' '.$customer['fullName'];
                $result[] = array('id'=>$customer['id'], 'label'=>$lable, 'value'=>$lable);
            }
            echo CJSON::encode($result);
            Yii::app()->end();
        }
    }

Вот и все :). Хочу еще отметить, что так же просто можно организовать мульти автокомплит.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *