Search in repeater

advanced-prototyping
newbie-question
repeater-widget
#1

I’ve been trying to create a text field where the user can add a short code for their bank. For some reason, I just can’t seem to wrap my head around the right approach. I’ve read the tutorial on repeaters, read basically every topic that had a similar case and tried the solutions provided. But still, I’m not getting any closer to the result. At this point, I’m just scared I’m overseeing some very basic stuff.

I have a text field where the user can add a short code for a bank.

  • They are always four alphabetic characters, capitalized
  • They can not be anything else than what I’ve added to the repeater
  • User can type them with the keyboard or tap on one of the three suggestions below the text field
  • If the user taps on the suggestion, I set it as the text on the text field
  • If the user starts typing, the suggestions need to update to the closed matching suggestion, starting from the first character. For example: the first three suggestions are ABNA, RABO and INGB. If the user types ‘A’, ABNA stays, RABO and INGB are updated with other suggestions from the repeater starting with ‘A’. The user adds an ‘S’ -> ABNA gets removed and ASNB, the now closest matching bank in the repeater gets shown

I’m struggling with this last part. What ever I try, as soon as I start typing, no results show. What am I doing wrong? I’ve added a very basic setup of the text field. I believe it’s something with how I write the expression. I’ve tried several that I’ve found on the forum and adjusted them to my own case, but none work.

The expression:
[[item.Column0.indexOf(text.this) >= 0]]

Add Bank.rp (60.2 KB)

#2

I don’t have RP 9 so I can’t open your file.

But it sounds you need to specify the script to check on either “OnKeyUp” or “OnTextChange” event.
You should try something simpler to get it working, such as:
OnKeyUp
Set up condition if that text field contains A show “ABNA” and “RABO”.

Sorry it’s in pseudo code but I don’t have RP9 at the moment. I find I need to get that kind of thing working before adding repeaters to the mix.

#3

Hi!

There are two issues with your file. The first is that you have “text.this” instead of “this.text” in the indexOf() function. The second is you need to set your filter AFTER changing the text to uppercase in your OnKeyUp interaction.

Note that I would suggest changing your filter to the following, which would handle the case where the field is blank:

[[ This.text == "" || item.Column0.indexOf(This.text) >= 0]]

Basically this says “Show a given row if my text is blank or if my text value is contained by the row.” (The “||” double-pipe means OR.)

There’s WAS a good explanation about how filters work in general on the forums, but it has been removed. (For some reason they got rid of the Tips and Tricks category on these forums, which was full of good info.)

Instead I’ll attach the file, which contains the explanation. It’s solves a different problem than yours (filtering on multiple facets), but the filter explanation you might find helpful all the same.

facetfilters (1).rp (140.0 KB)

#4

Oh boy, I was afraid it would be something as simple this. Thanks! I’ve been going at it for about 5-6 hours yesterday. Can’t believe I didn’t catch this haha.

I’ve added your expression. Good catch! It works like a charm!

One thing with the expression though is that it returns every column with the character in it. For example: I don’t want columns where the first character of the user’s input is the third character of the column. In Javascript I would use nested loops to iterate through the columns and search for the i’th, j’th, k’th and l’th character in that order, but I have no idea how to do this in Axure.

It’s been a long time since I’ve used Axure and noticed a lot of changes. I remembered the topic with the explanation but couldn’t find it as well. It’s a shame it has been removed!

#5

Hi Isaac!

If you want to return results matching from the beginning of the string the user types, use

item.Column0.indexOf(This.text) == 0

instead of

item.Column0.indexOf(This.text) >= 0

That will make it so AB returns ABNA but not RABO.

#6

Awesome Joseph! Thanks! That totally works!

closed #7