Cjuiautocomplete

I would like the list returned by CJuiAutoComplete to be filtered to just those that match at the beginnning exactly what is typed. So I want "a" to return "apple" but not "orange."

JQuery’s autocomplete has a javascript function to accomplish this:


'select'=>$( "#autocomplete" ).autocomplete({

  source: function( request, response ) {

          var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );

          response( $.grep( tags, function( item ){

              return matcher.test( item );

          }) );

      }

});

Where ‘tags’ is the list of returned items.

How can I do this in CJuiAutoComplete?

You should be able to do the same. I think it would look like this:




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

    // other options...

    'source'=>new CJavaScriptExpression('

        function( request, response ) {

            var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );

            response( $.grep( tags, function( item ){

                return matcher.test( item );

            }) );

        }

    '),

));



Check out the source property.

OK. But now my problem is that I was using the source parameter originally to get the list of tags. So how can I combine both the getting of the tags and the regex in that same source parameter?

Is it possible to pass the user’s keystroke input to the Yii PHP createLeadnameList() method in my model that builds the list of tags? If not, how can I build the list of tags and then process my regex expression against it as the user types in the field?

My existing CJuiAutoComplete code is




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

	    	'name'=>'leadname',

		'source'=>$model->createLeadnameList(),

		'model'=>$model,

		'attribute'=>'leadname',

		'options'=>array('minLength'=>'1',),

		'htmlOptions'=>array('style'=>'height:20px;'),)

                );



Can you do something like this?




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

    // other options...

    'source'=>new CJavaScriptExpression('

        function( request, response ) {

            var tags = ' . CJavaScript::encode($model->createLeadnameList()) . ';

            var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );

            response( $.grep( tags, function( item ){

                return matcher.test( item );

            }) );

        }

    '),

));



Yes. Thank you. That works :)

Can you explain what the dots do before and after the CJavaScript::encode fragment in the var tags line? I know they are used for appending in PHP, but I don’t understand what is being appended in the tags variable.

Here is my working CJuiAutoComplete statement:




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

            'name'=>'leadname',

            'model'=>$model,

            'attribute'=>'leadname',

            'options'=>array(

                'minLength'=>'1',

                ),

            'htmlOptions'=>array(

                    'style'=>'height:20px;'

                ),

            'source'=>new CJavaScriptExpression('

                    function( request, response ) {

                    var tags = ' . CJavaScript::encode($model->createLeadnameList()) . ';

                    var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );

                    response( $.grep( tags, function( item ){

                        return matcher.test( item );

                    }) );

                    }

                '),

            )

        );



The call to CJavaScript::encode() is just creating a string of javascript, so the dot operators are being used for concatenation as normal.

String. Got it. Thanks again.