Repeater with Autofill Search Help

advanced-prototyping
repeater-widget
#1

Hello,

Hoping someone can help me with my issue or let me know if it is even possible.

I am creating a autofill “search” functionality box and I am looking to style the last row differently than the rest. See attached (below) for axure file. Object on the left is how it currently functions and object on the right is what I am trying to get it to look like.

NOTE: Auto search logic is fine, I am just in need of some help styling the last row (differently) only.

Any advice would be greatly appreciated.

AxRepeater_Style.rp (73.6 KB)

#2

You might be able to use the .visibleItemCount method to give you a total of visible items in a repeater, then as the repeater loops through itself, check if the current item is the last one. If it is, then show the different styling.

This thread may help: Repeater/Dataset Documentation (API, Item, TargetItem, Variables)

#3

Thanks @jayzee! That was my initial thought in my head, but have never done it in axure… Based upon the link you sent, I tried to give it a whirl. I can get counts, but I am not sure how to single out the last one (since it can change) . Meaning as you get closer to a match the results get lower, so it could show 3 then 2, then 1 result(s).

That would be my first issue. Secondly, applying more than one style - to the best of my limited knowledge I think you can only apply one style per repeater.

Any other thoughts?

-A

#4

Hi Axman

I’ve done a demo for this here - it involves making the green backdrop for the list item in the repeater a dynamic panel and having 2 states - STANDARD and LAST.

The LAST state has the rectangle extending down with curved corners. It’s set by the OnItemLoad script if the item is last in the repeater.

Might need to do some finessing - but gives you an idea of one approach.

File here: Repeater_Style.rp (101.7 KB)

#5

@Mike_Gray Thanks a ton! I should be able to modify this for my needs. What other approaches might one take to complete this out of curiosity?

#6

@Mike_Gray did it very elegantly. I like his way better than what I was thinking, which was to run a counter (x+1) within the repeater loop, then compare that to the visible items count to determine if it’s the last item (does x = # of visible items?).

As far as applying a style, @Mike_Gray used different states of a dynamic panel. You could also use an interaction style for a “selected” state, then use the Set Selected action to display the style.