Autocomplete Selection Repeater Variables

Hi everyone, I’m working in autocomplete fields and everything is working ok, but i don know how I can do two things:

  1. Select one results with the arrow keys
    2.Select one result with mouse.

And in both cases the result selected remains in the box.

Please anyone can help me!
I attached the file for you help.
Predictable Fields.rp (54.0 KB)

Maybe something like this?

Predictable Fields.rp (63.6 KB)

2 Likes

Jed, it’s awesome! just I was looking for, thanks so much for the help and the self explanatory notes in the file, absolutely you are a Fu Master.

WOOOOOHOOOOO!!!

Glad I could help.

@rguzmanbmx,

Try this out:
Predictable Fields 2.rp (58.8 KB)

Your second requirement is easier, so I’ll start with that.

The mouse clicks are handled with the OnClick event, so the repeater item, “Prediction” selects itself with OnClick. In order to make only one item in the list selectable at one time, you must assign it a selection group, so I did that (naming it “prediction item”). Importantly, in a repeater list, you must uncheck the “Isolate Selection Groups” checkbox (below the repeater table) or the selection groups won’t work properly. So, if any item in the repeater is clicked, it is selected and all other repeater items are unselected . Oh yes, I assigned a “selection style” of light blue fill to show the selection visually and set the search field to the selected item.

Using the up and down arrow keys to make repeater list selections is a little tricky, especially when you first do this stuff–but it is fairly straightforward once you understand the theory behind repeaters. First of all, to track keypresses (like arrow keys) you must use the OnPageKeyDown (or OnPageKeyUp) event to trap the keypress and assign interaction code to it.

I’m not sure what you were trying to do with the OnLoadVariable, but I used it to track which item is selected (if a result item is clicked) or should be selected (if up or down arrow key is pressed.) It represents the index of visible repeater items. To initialize this variable, I set it to zero whenever a search filter is applied. If the down-arrow is pressed, OnLoadVariable is incremented by 1 and the repeater item is moved by (0,0) --this results in no actual movement, but triggers the OnMove event for the item. (Here is where repeater theory comes in to play…) Keep in mind that a repeater list is a series of copied items (or rows in your repeater table.) You can’t directly do something with one repeater instance only, like “select repeater item 1” because that would trigger every copy to also be selected, resulting in the last item always being selected. So you have to do something extra… There are two approaches I’m aware of: 1) Trigger an event (like OnMove or OnRotate) and have each repeater instance test itself against an index number in order to identify itself as “the correct one.” or 2) Set up a filter action, add a special column in the repeater table and some OnItemLoad events to handle the filter. The first approach is tricky but easier to set up, the second approach is more robust and scalable, but can result in some complicated repeaters. I chose the first approach…

Here is the code for the repeater item, “Prediction”:

Here is the page code to capture key presses:

I added an event to capture ‘Return’ (or "Enter’) key, so if you use the arrows to walk through the list and then press Enter, it will select it and set the search text. To do this, I added another global variable, ‘SelectItem’.

@jlhelmers, looks like we tackled this at the same time with similar approaches. Yours is pretty clean–nice!

Ji @jlhelmers Is there a way to have the predictive results disappear if the text typed into the search box does not equal an entry in the repeater?

Absolutely. However, since arrowing through the list changes the text box to whatever is currently selected, that would probably filter the selection down immediately to the very first row hit by the arrow.

To fix this, we would need to NOT set the textbox text to arrow selection.

Is there a way to have the repeater box to disappear when I

  1. Select an item from the repeater list?
  2. Type an entry that isn’t available?

Currently, the box stays when i click an entry or type something that doesn’t match a result.
Thank you

Yes, just hide it. :relieved:

Of course, the trick is thinking through when and how it should be hidden, and your “requirements list” is a good start at where to put the hide statements. Actually, I think this was the intent in the original post, but since there are at least 3 different widgets/groups named with “Prediction” it can be easy to call the wrong widget.

In the following update, I copied the Home page to Page 1 with these improvements. I renamed all the “Predictions” widgets to be more descriptive and distinctive and put hide statements to handle your requirements.

For this, we go to the code for the repeater item’s OnClick event and add in a hide (Note, we could do this for the OnSelect event, but as @jlhelmers points out, the resulting experience doesn’t work too well. Hovering or arrowing through the list triggers the OnSelect event (changing the item’s background color) but in my example, it takes a mouse click or Enter key to “choose” an item and update the search field text. Doing this can also hide the “Predictions Group” which is easily handled. Also, when using arrow-keys and Enter, the list item’s OnMove event is called, so we add the same hide action:

This means we need to update the interaction code that handles OnTextChange for the search input field. Currently, the Predictions Group is shown whenever the text changes and is not blank. We’ll need to change this to test the repeater list after the filter is applied and determine if any items in the repeater are visible–in other words, if nothing matches and every item is filtered out, then hide the Predictions Group. Because there is nothing like an OnFilter event, we’ll have to do this conditional test in another way. I’ll make use of the OnMove event again, this time for the “search field” widget such that when text changes the filter is applied then it moves itself and tests the results of that filter. My first attempt at this worked fine, but it also broke requirement 1 --when a list item is chosen, it updates the search field text and results in a visibleItemCount = 1, so the Predictions Group is hidden but then immediately shown again. So, to handle this I added another global variable, ChosenItem. Not all that elegant, but it works… Now when a list item is clicked or chosen with an Enter key, it sets ChosenItem to its list index. Then the conditional test becomes “if the visible list is empty or and item has been chosen” then hide the Prediction Group. Here is the resulting code for the search field:

Predictable Fields 3.rp (83.7 KB)

Thank you VERY much. This is just what i need.

Hi Guys,

I been looking for training courses in every stage, Beginner, Medium, Advanced, and accelerate the learning curve, because I feel that is so complicated to prototype the interactions, so you know some resources to speed my Axure XPerience? I appreciate yours comments.

Thanks a lot for the support!

Hi there,

Nice and saved me some time. I just want to say that the forum and some examples have been of massive help and this is one of the best knowledge forums i have seen/used, keep up the great work and continue to show off and input on other posts!

Regarding this post, is there a way to then link the result to a result, a list of option “like the search button on the forum page” or maybe like in dynamics where it takes you to “a control panel”

Thanks in advance,