[PrimeDraco]

Hello everyone, I am really stuck with this and I can't find a solution. Any hint or suggestion would be appreciated.

I am trying to add categories to my CJuiAutoComplete. I am following these instructions: jqueryui.com/autocomplete/#categories and I have the following in my view:

$this->widget('zii.widgets.jui.CJuiAutoComplete', array(
	'attribute'=>'suburb_city',
	'sourceUrl' => $this->createUrl('site/autoGeoLookup'),
        'name'=>'q',
        'options'=>array(
		'showAnim' => 'fold',
		'minLength'=>'2',
		'widget' => '"custom.catcomplete", $.ui.autocomplete, {
				_renderMenu: function( ul, items ) {
					var that = this,
					currentCategory = "";
					$.each( items, function( index, item ) {
						if ( item.category != currentCategory ) {
						ul.append( "<li class=\'ui-autocomplete-category\'>" + item.category + "</li>" );
							currentCategory = item.category;
						}
					that._renderItemData( ul, item );
					});
				}
			}',
        ),
        'htmlOptions'=>array(
		'size'=>45,
		'maxlength'=>45,
		
        ),

And the CJuiAutocomplete doesn't display the categories. Any hint?

Thanks for your help!

[softark]

Hi PrimeDraco,

I don't think you can create a custom autocomplete widget using CJuiAutocomplete, because CJui* in general doesn't support jQuery UI widget factory.

As you see in the source code of 'Autocomplete | Categories' (http://jqueryui.com/...ete/#categories), you have to create a custom widget based on jQuery UI Autocomplete and apply it to the target element.

  <script>
  $.widget( "custom.catcomplete", $.ui.autocomplete, {
    _renderMenu: function( ul, items ) {
      var that = this,
        currentCategory = "";
      $.each( items, function( index, item ) {
        if ( item.category != currentCategory ) {
          ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
          currentCategory = item.category;
        }
        that._renderItemData( ul, item );
      });
    }
  });
  </script>
  ...
    $( "#search" ).catcomplete({
      delay: 0,
      source: data
    });
  ...

Note that "$.widget" in the above refers to the "widget factory" method of jQuery UI (http://api.jqueryui.com/jQuery.widget/). It's not one of the options of jQuery UI Autocomplete (There's no option named 'widget' ... see http://api.jqueryui.com/autocomplete/ ... in fact, there's 'widget', but it's a "method" and it is irrelevant in this context.)

So, after all, I think you have to write a javascript without the help of CJuiAutocomplete.