Cjuiautocomplete Rendermenu And Categories

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!

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/autocomplete/#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.