jui.autocomplete highlight term

Hi,

I’m using jui.autocomplete widget. Is there a way to highlight the entered words at the suggestion-list?

For example the current jui.autocomplete input-value is "ber"

and the list of suggested words is like that:

bern

berlin

Leberda

Thank you

Put this on your document:




$.ui.autocomplete.prototype._renderItem = function (ul, item) {

            item.label = item.label.replace(new RegExp("(?![^&;]+<img src='http://www.yiiframework.com/forum/public/style_emoticons/default/wink.gif' class='bbc_emoticon' alt=';)' />(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this.term) + ")(?![^<>]*>)(?![^&;]+<img src='http://www.yiiframework.com/forum/public/style_emoticons/default/wink.gif' class='bbc_emoticon' alt=';)' />", "gi"), "<strong>$1</strong>");

            return $("<li></li>")

                    .data("item.autocomplete", item)

                    .append("<a>" + item.label + "</a>")

                    .appendTo(ul);

        };



Register the above script with CClientScript and POS_LOAD. Should work.

Cheers

Hi!

Thank you!

I tried the following:


Yii::app()->clientScript->registerScript('highlightAC','$.ui.autocomplete.prototype._renderItem = function (ul, item) {

            item.label = item.label.replace(new RegExp("(?![^&;]+<img src='http://www.yiiframework.com/forum/public/style_emoticons/default/wink.gif' class='bbc_emoticon' alt=';)' />(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this.term) + ")(?![^<>]*>)(?![^&;]+<img src='http://www.yiiframework.com/forum/public/style_emoticons/default/wink.gif' class='bbc_emoticon' alt=';)' />", "gi"), "<strong>$1</strong>");

            return $("<li></li>")

                    .data("item.autocomplete", item)

                    .append("<a>" + item.label + "</a>")

                    .appendTo(ul);

        };',POS_LOAD);

…but unfortunately nothing changes :frowning:

Is it important if I register the script at the controller or view, before or after calling the widget?

//Edit: by the way: if I simple copy that JS code into an javascript file (witch is available all the time (registered in every action)), an error occurs: "$.ui is undefined". Is this normal behavior?

If I use register script: nothing happend: no error, no highlighting.

CClientScript::POS_LOAD :)

Edit:: In fact, use it on CClientScript::POS_END

Make sure you don’t have any errors. I recommend you to load your page with FIREBUG (on Firefox) or Chrome Developer Tools (on Chrome).

Hi!

Oh.yeh… “CClientScript::POS_LOAD” Thank you! That’s it.

Thank you so much. I’m working since days on that highlighting of autocomplete suggestions. Tried selfmade callback functions as autocomplete-source and different other things.

But your solution is, what I was looking for.

Thank you.

Hi,

…one more question.

What is with the highlight option:

http://www.yiiframework.com/doc/api/1.1/CAutoComplete#highlight-detail

Is this the "build-in" function fore the same issue?

Rall0r