Repeater autosuggest highlight search term in grouped lists

[J.o.sf]

Hi Axure Experts,
I read all the posts regarding autosuggest but have not found a suggestion for this one.
Please see attached file. I have mocked up my repeater items to filter when I click “Search” button. What I need help with is, how do I highlight the search term when showing results? The search term can be at the beginning or middle of an item. For example, if you type in “MN”, you should see “456 MNO” with “MN” bolded. Or if you type in “23”, you should see “1 23 ABC, 1 23 JKL”.
Your expertise is appreciated!

search.rp (62.5 KB)

Thank you!
Jenny

[nkrisc]

There’s actually examples of that on the forums here:

Searching a string

Yes, but it's a little complex. Here's a Set Text action I made to bold a matching text string from user input to another widget. Make sure to change the Set Text action from "Value" to "Rich Text" so you can apply to bold formatting. "This" in this case refers to the text field, so This.text is the text on the text field. This was used with a repeater data set so I'm comparing against Item.name column. [[Item.name.substring(0, item.name.toLowerCase().indexOf(This.text.toLowerCase()))]][b][…

Also check out Jane’s follow up reply down the thread for a more detailed breakout of the example file referenced.

[J.o.sf]

Hi Sifu nkrisc,
I followed your instructions and mock this up. Do you know why the entire line is bolded?

search.rp (63.4 KB)

Thanks!

[nkrisc]

Because you had LVAR1 set to “Text on widget” when the expression already included “LVAR1.text” so that was redundant. Either replace “LVAR1.text” with just “LVAR1” in the expression, or (more simply) change “Text on Widget” to just “Widget” in the local variable settings.

I recommend the latter. It should work fine then.

[J.o.sf]

Thank you Sifu nkrisc, You are great! Thank you for toubleshooting it for me.

This is more challenging.

group search.rp (84.0 KB)

What if the results are grouped under headers? What would you do to make the filter only filtering and bolding the non-headers? See attached.

When you type in “Kids” or “Youth”, right now it is filtering each header and bolding it. I would like to keep the header static and filter only the list under the header. Also, do not show header if there is no result under it.

Thank you Sifu!