jui.autocomplete: use function as source

Yii 1.1 General Discussion
1

Hi,

i’m using zii.widgets.jui.CJuiAutoComplete widget, where autocompletion works fine, as log as there is an URL as source for the suggestions.




        $this->widget('zii.widgets.jui.CJuiAutoComplete', array(

                        'model'=>$model,

                        'source'=>$this->createUrl('ajax/autoComplete'),

[...]

But now I need the suggestions coming from an javascript function, like this:


'source'=>'js: autoCompleteTags();'

But it seems not to be working.

Is it possible to use an function as source? How should the javascript function be designed? I tried something like this:


function autoCompleteTags{


    var Tags= [

        "ActionScript",

        "AppleScript",

        "Asp",

        "BASIC",

        "C",

        "C++"

    ];

    return Tags;

    }

(This is just an simple example. The JS function code will be replaced by some more complex code. But the situation will be the same)

Thank you for any kind of help!

2

I don’t think you can have a comma after the last array element in JS.

If nothing else helps




$( ".selector" ).autocomplete( "option", "source", callback);

http://jqueryui.com/demos/autocomplete/#option-source

/Tommy

3

Hi tri,

Sorry, the comma is just an smal error from cutting the large list into a small example :wink:

I still have looked at the jQuery documentation. Sorry, I’m a little bit of helpless, how to write an callback function. Or is it possible simple to put the function name there?

Like this:




$( ".selector" ).autocomplete( "option", "source", "autoCompleteTags();");
4

There’s another possible typo




function autoCompleteTags{

// should be 

function autoCompleteTags() {

I erroneously used the term callback here




$( ".selector" ).autocomplete( "option", "source", callback);

Actually this should be the return value from the function call (that is the parenthesis should be there). My first guess would be that you should use just the name of the function to specify a callback in the source property of CJuiAutoComplete.

Edit: or perhaps not. On second thought, passing a string defining a js function call would give the same result as a string containing a js array.

/Tommy

5

to keed it simple, i tried the following:

at the view:


			$this->widget('zii.widgets.jui.CJuiAutoComplete', array(

    							'model'=>$model,

    							'attribute'=>'PHRASE',

    							'id'=>'tags',

    							'source'=>'js:m();',

    							'options'=>array( 'showAnim'=>'fold'),

								));

On an central Javascript file there is the following code:




function m() {

	d=new Array("a","A");

	return d;

}

If you look at this: http://www.yiiframework.com/doc/api/1.1/CJuiAutoComplete#source-detail an JS Funktion should be work. But it does not. There is no JS Error but also no drop-down box with suggestion "a" or "AA" by typing a.

:frowning:

maybe I have an completely wrong understanding of this topic?

6

I did some testing and found out it will work if you pass a string containing a js function call, but only if you omit the trailing semicolon.




 'source'=>'js:m()',

/Tommy

7

great - that’s it!

Thank you so much!