JUI Autocomplete html-encoded suggestions

Question

jQuery UI starting from version 1.8.4 html-encodes Autocomplete suggestions (according to this issue).

This became a problem for me now. I used to theme the output for the suggestions, but now (if I use version 1.8.4 or higher) Autocomplete just html-encodes my theming. All tags like <b>, <span> are being printed to the user instead of displaying the actual styling.

So the suggestions now look like:

• <b>su<b>suggestion
• another <b>su<b>suggestion

instead of:

• suggestion
• another suggesion

I've read about custom data, but I use Yii framework and the output is being generated from certain actions (PHP code).

So, how do I theme the output now?

Thank you!

Answer 1

You can use open function from jQuery UI to replace the encoded text.

Here's an example:

$this->widget('zii.widgets.jui.CJuiAutoComplete', array(
                'name'=>"bug",
                'source'=>$this->createUrl('/autocomplete'),

                // additional javascript options for the autocomplete plugin

            'options'=>array(                       
                    'open'=> 'js:function(event, ui){
                      $("ul.ui-autocomplete li a").each(function(){
                      var htmlString = $(this).html().replace(/&lt;/g, "<");
                      htmlString = htmlString.replace(/&gt;/g, ">");
                      $(this).html(htmlString);
                      });
                    }'
            ),
));

Answer 2

Better use a HTML plugin