Hi there!
I try to build a categorized autocomplete like the one in the jquery ui demos:
Jquery’s autocomplete demo
How can i achieve this in yii? Because It’s a very handy feature.
I already added a ‘category’ label to my json feed. I only need to change the cjuiautocomplete widget?
Would be great if you guys could help me out.
thanks a lot!
Will need more detail on what you are trying to achieve. However from a widget perspective something like this in your view should get you started.
<div class="form">
<?php $form=$this->beginWidget('CActiveForm', array(
'id'=>'myForm',
'enableAjaxValidation'=>true,
)); ?>
<p class="note">Fields with <span class="required">*</span> are required.</p>
<?php echo $form->errorSummary($model); ?>
<div class="row">
<?php echo $form->labelEx($model,'name'); ?>
<?php $this->widget('zii.widgets.jui.CJuiAutoComplete', array(
'model'=>$model,
'attribute'=>'name',
'id'=>'name',
'name'=>'name',
'sourceUrl'=>$this->createUrl('ajax/userlist'),
// additional javascript options for the autocomplete plugin
'options'=>array(
'delay'=>300,
'minLength'=>2,
'showAnim'=>'fold',
'select'=>"js:function(event, ui) {
$('#jquerySelector').val(ui.item.id);
}"
),
));
?>
<?php echo $form->hiddenField($model,'name'); ?>
<?php echo $form->error($model,'name'); ?>
</div>
<div class="row">
<?php echo $form->labelEx($model,'email'); ?>
<?php echo $form->textField($model,'email',array('size'=>60,'maxlength'=>64)); ?>
<?php echo $form->error($model,'email'); ?>
</div>
<?php $this->endWidget(); ?>
</div><!-- form -->
You can also use code like this as the action specified in ajax/userlist (specified above).
public function actionUserList($term)
{
if (isset($_GET["term"]))
{
$res = array();
$criteria=New CDbCriteria ;
$criteria->with = array('user');
$criteria->addSearchCondition('user.forenames', $term , true, 'OR');
$criteria->addSearchCondition('user.surname', $term , true, 'OR');
$list = User::model()->findAll($criteria);
foreach($list as $user)
{
$res[]= array('value'=>sprintf('%s %s' , $user->person->forenames , $user->person->surname) ,
'id'=>intval($user->id) ,
);
}
echo CJSON::encode( $res);
Yii::app()->end();
}
}
Hope that helps! 
Thanks for your quick reply.
The autocomplete already works here. JSON feed too.
What i want is:
a search field where you a user can input (destination/hotel name).
the destination fields should be categorized under Destination, hotels under Hotel.
Exactly like how it works on the jquery example.
I know I should add this code somewhere and modify it, the question is how so it works in yii?
But i tried everything (register this piece of code,…), but never worked…
$.widget( "custom.catcomplete", $.ui.autocomplete, {
_renderMenu: function( ul, items ) {
var self = this,
currentCategory = "";
$.each( items, function( index, item ) {
if ( item.category != currentCategory ) {
ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
currentCategory = item.category;
}
self._renderItem( ul, item );
});
}
});
Hello! I have the same problem, I can not set the format of the item
This is my code, but it does not work
$this->widget('zii.widgets.jui.CJuiAutoComplete', array(
'model'=>$model,
'attribute'=>'author',
'source' =>CHtml::normalizeUrl('books/autocomplete'),
'theme' => 'swanky-purse',
'options'=>array(
'minLength'=>'2',
'showAnim' => 'fold',
'formatItem' => 'js: function(ul, items){
var self = this,
currentCategory = "";
$.each( items, function(index, item){
if(item.category != currentCategory){
ul.append( "<li class=\'ui-autocomplete-category\'>" + item.category + "</li>" );
currentCategory = item.category;
}
self._renderItem( ul, item );
});
}',
'select' =>'js: function(event, ui) {
this.value = ui.item.value;
$("#Hotels_id").val(ui.item.id);
return false;
}',
),
'htmlOptions' => array(
'maxlength'=>50,
),
));
Can you please tell where is the mistake?
bumping also mines works except can’t format display with jquery’s example and yii’s code.