A
A
Anatoly Rodin2016-10-26 19:48:13
JavaScript
Anatoly Rodin, 2016-10-26 19:48:13

How to group by category the result of autocomplete in Yii - CJuiAutoComplete?

The code below works fine - it gives a list with search results, but... I
needed to group the list by category (city, hotel, etc.).
I did not find anything in the documentation for this widget. As I found out it uses jquery autocomplete . There is also an example of sorting by category. But due to little experience with Yii and JQueryUI, I could not tie one to the other.
I would appreciate any idea or solution.
Thank you.

<div class="row-fluid">
  <div class="control-group span12">
     <?= CHtml::activeLabelEx($model, 'place'); ?>
     <? $this->widget('zii.widgets.jui.CJuiAutoComplete', array(
            'model' => $model,
            'attribute' => 'place',
            'sourceUrl' => CController::createUrl('GetPlaces'),
            'options' => array(
              'delay' => '0',
              'minLength' => '2',
              'select' => 'js: function(event, ui) {
                this.value = ui.item.label;
                                $("#HotelSearchForm_placeId").val(ui.item.placeId);
                                $("#HotelSearchForm_placeType").val(ui.item.placeType);
                return false;
              }'
            ),
            'htmlOptions' => array(
              'class' => 'span12',
              'style' => 'font-size:18px; height:36px; ',
            ),
          )); ?>
          <? echo $form->hiddenField($model, 'placeId'); ?>
          <? echo $form->hiddenField($model, 'placeType'); ?>
          <?
          Yii::app()->clientScript->registerScript('autocomplete', "
            

                        jQuery('#HotelSearchForm_place').data('ui-autocomplete')._renderItem = function( ul, item ) {
              return $( '<li>' )
              .data( 'item-autocomplete-item', item )
              .append( '<div style=\'margin: 0 20px;\'><p style=\'float: left; margin: 0 \'>' + item.value
              + ' <i>(' + item.type + ')</i>'
              + '</p><i style=\'float: right\'>' + item.hasHotels + '</i></div>' )
              .appendTo( ul );

            };

 						 ",
            CClientScript::POS_READY
          );
          ?>

  </div>
</div>

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question