Мульти автокомплит с помощью CJuiAutoComplete

Я уже писал про использование CJuiAutoComplete. Сегодня расскажу, как с помощью него можно сделать мульти автокомлит. Для этого надо будет только изменить конфиг виджета и все.
Основываясь на предыдущей заметке, предположим, что теперь необходимо указать несколько покупателей.

$autocompleteConfig = array(
    'model'=>$model,
    'attribute'=>'customers',
    'value'=>$model->customers,
    'source' =>'js:function(request, response) {
        $.getJSON("'.$this->createUrl('customers/autocomplete').'", {
            term: request.term.split(/,s*/).pop()
        }, response);
    }',
    'options' => array(
        'minLength' => '2',
        'showAnim' => 'fold',
        'search' =>'js: function() {
            var term = this.value.split(/,s*/).pop();
            if(term.length < 2)
                return false;
         }',
        'focus' =>'js: function() {
            return false;
         }',
        'select' =>'js: function(event, ui) {
            var terms =  this.value.split(/,s*/);
            terms.pop();
            terms.push(ui.item.value);
            terms.push("");
            this.value = terms.join(", ");
            return false;
        }',
    ),
    'htmlOptions' => array(),
);

Экшен нам отдает строку разделителем в которой является запятая. После отправки формы в атрибуте customers будет строка, которую можно распарсить и дальше делать, все что надо :).

Использование 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();
        }
    }

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