CODEWITHSUNDEEP
javascriptjqueryyii
Nicolas400
Nicolas400

Reputation: 653

how to suggest multiple columns in CJuiAutocomplete in YII Framework?

I'm using CJuiAutomcoplete Widget.

Everything works fine, but I wnat to show multiples columns in the suggestion listbox.

I concatenate string for the "value" option in jSON structure, but what I want is ti have multiple columns.

I found that Jquery UI uses li and ul html tags ...

I can't figure out how to create a list box with columns !

Any Idea ?

Best Regards

Nicolas

Edited: I found something like I need... http://jqueryui.com/demos/autocomplete/#custom-data

But because I use yii I can't figure out how to add the block:

 .data( "autocomplete" )._renderItem = function( ul, item ) {
      return $("<li></li>" )
     .data( "item.autocomplete", item )
     .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
     .appendTo( ul ); };

Because I don't know almost nothing of jQuery I don't understand what ".data" method do.

Regards again ...

Upvotes: 1

Views: 604

Answers (1)

Alexander Palamarchuk
Alexander Palamarchuk

Reputation: 879

I've decided this problem by overriding built-in handler:

$controller->widget('zii.widgets.jui.CJuiAutoComplete', array(
    ...
    'source'    => 'js: foreignKeyQuery',  //overriding
    'options'   => array( //passing params from Yii view script
        'delay' => 700,
        'sourceUrl' => Yii::app()->request->baseUrl.'/ajax/search/',
    ),
    ...
));

And JS-handler like this (don't forget to include it in View script):

function foreignKeyQuery(request, response)
{
    var params = {
        'term': request.term,  //default param
        'protest': 'Pussy Riot'  //free params
        ...
    };  //Of course you may get params in any way, and using "this"

    $.ajax(this.options.sourceUrl, {
            type: 'post',
            dataType: 'json',
            data: params,
            success: response
        });
}

Framework is only an instrument. Nobody limits you in using JS as much as you want.

Upvotes: 2

Related Questions