Dynamic auto suggest using repeater widget

repeater-widget
#21

Thanks for this, this is awesome! The only thing I’ve been racking my brain about is that I can’t quite figure out what’s the event handler when I click the “x” in the search text field to clear the term. I want the search term to stop highlighting in the results in the repeater when that happens, or hide the repeater completely, since there’s no search term in the text field.

OnTextChange doesn’t capture it; OnClick doesn’t either. The closest I’ve come is that OnLostFocus I check if the search text field is blank, in which case I can do what I need.

Thanks in advance.

#22

I never was able to figure this out, but what I ended up doing instead was recreate the “x” close button as a dynamic panel covering the actual button. That way I could easily use whatever events I wanted to. In this case it was an onClick that cleared out the text field and search term, and any filters as needed.

#23

Hi!

I was asked privately to post the file for this post above.

Here it is. It’s still in 7.0, but it will convert cleanly to 8.

Autocomplete_Repeater.rp (77.5 KB)

#24

New to Axure, and first time poster.
So bare with me as this may be ridiculously simple.

I am using

file, and can change my own elements fine, but when i copy it from the initial file into the page i am using in my document something goes wrong and the only thing it list as a suggestion is " [[TextBefore]][[TextBetween]][[TextAfter]] "

what part of the code is breaking or not copying? i cant work it out.
What i did notice is it is reading my list i entered as the correct number of responses show when i type in text to the ‘search’, but they all say [[TextBefore]][[TextBetween]][[TextAfter]]

thank you in advance!

Dylan

#25

Hi!

This prototype relies on the existence of 3 global variables: TextBefore, TextBetween, TextAfter. These variables need to be defined in your Global Variables list before pasting the widget into your file; otherwise the code setting these variables to their values will be invalid, and adding the variables after the fact won’t help. (Usually I don’t use global variables for this very reason; it makes widgets completely unportable. Sorry about that.)

So to fix this, you’ll need to delete the widget, add the global variables to the global variables list, and then re-paste the widget,

#26

Great!
That totally helped! and i just learned about Global variables :smile:

Is there away to link the variables in the list to a ‘case’ ?

Essentially i would like to be able to type ‘Australia’ (or something), and when i select it it runs an action, like showing or hiding a widget,

If that is too complicated its okay, but you seem pretty switched on so worth asking :slight_smile:

#27

Hi!

Yes! The contents of a repeater are the same in each row. What differs per row is the value Item.index, which gives you the row’s number, and - important for your question - the column data in the dataset, like “Australia.” So upon click of a row in the repeater, you can check to see if that row’s data for the country column is “Australia.”

To refer to a column value for the row, use the syntax Item.columnName. Since this is an expression, you’ll need to surround it by double square brackets: [[ ]]

So if the column that holds the country is called “country,” the following condition in the OnClick interaction (on any item in the repeater) will evaluate to true if the row you clicked on is “Australia”

OnClick
    If (value) [[Item.country]] equals Australia
        Do whatever
#28

Sorry, I am total noob in this field but still try hard.
I want that if I select e.g “Aachen” in the auto-complete/search, that in the “Liegenschaft” entry the table with the places available in “Aachen” opens for “Ahlen” the “Ahlen”-table etc. Autocomplete_Repeater_Standorte.rp (85.5 KB)
how to connect this?

#29

Hi!

Don’t worry - what you are trying to do is tricky. I updated your file and included some notes on what I did. If you have any questions, let me know. (Though I generally come here just once a day.) Aside from having it choose the right dropdown list, it also now handles hitting enter in the search field (it chooses the first item) and clicking on a repeater dropdown itself.

Live sample

file: Autocomplete_Repeater_Standorte.rp (98.1 KB)

#30

How do you make each option in the menu have their own unique link to another page?

#31

Hi ryanjohnsondBD,

One way is to enter each URL directly into a row of the repeater dataset. Then in the OnClick case for the repeater item button, you could create an Open Link action that targets the corresponding item row:

RepeaterRowLinks.rp (49.5 KB)

Depending on the domain you want to link to, it’ll probably be more feasible to open new links in a new tab rather than in the current window.

HTH!

#32

Can someone explain step by step how Global Variables (TextBefore, TextBetween, TextAfter) work?

What does lines of code do?

#33

Just wanted to share this in case anyone else is in need of it. The solutions given above are amazingly awesome and efficient. Thanks to all for your work.

I needed to do a little more formatting and functionality, so I added a few things. Outside of styling needs, I also made it portable so that it doesn’t rely on global variables. (I maintain a widget library for our team, so it can’t be tied to a specific file with variables defined there.) Also of note, I added functionality so that you can tab through the current result set and hit enter to confirm it. Hope to save someone time down the line…

AutocompleteExtra.rp (70.2 KB)

#34

hi, I would like to show the full list of options from my repeater OnFocus or Onclick of the text input and then filter down results based on text input. However I can’t get it to display using either Onclick or OnFocus, am I missing something?

#35

Hi!

If you are using the example from the Jan 25 post above, you need to change the filter (in OnLoad of the repeater) from this:

[[Item.ListEntry.toLowerCase().indexOf(LVAR_SearchText.toLowerCase())>=0 && LVAR_SearchText != '']]

…to this:

[[Item.ListEntry.toLowerCase().indexOf(LVAR_SearchText.toLowerCase())>=0]]

The deleted portion of the filter basically says, “Don’t show any rows if LVAR_SearchText is blank.”

#36

Thanks for responding @josephxbrick. I’ve tried your suggestion and a few other things but still not getting the desired result. The list appears correctly and is scrollable on first click, however the auto suggest filtering only works if I click out and back into the search input box. Once I select one item from the list it doesn’t work for the second item. I feel I may have taken this down a rabbit hole and it would be easier to start again but just incase I have added my RP file.

Holidaycalendar.rp (135.1 KB)

#37

Hi!

There are two issues with your file:

  • You should be using the OnTextChanged interaction for the text field instead of OnClick. That way it will update the repeater as you type
  • On the OnClick interaction of ListEntry (in your repeater row) you have two hide commands: The first one hides the repeater (instead of the dynamic panel containing the repeater) and two other things. The second one hides the dynamic panel containing the repeater. Remove the repeater from the first hide command.

image

[Edit] Note that if you are intending to hide the repeater when the field is blank, revert to the first filter you were using and get rid of any command that hides the repeater or the repeater’s DP and show the DP by default. Also make sure that the dynamic panel containing the repeater is set to Fit to Content. The first filter shows no rows when the field is empty automatically, and it should perform better. Be sure that there are no spaces or carriage returns after the filter (which may happen if you copy/paste the filter from the previous post.)

#38

Perfect thanks @josephxbrick that all works a treat. The only other enhancement that would be great is to highlight individual items somehow if its already been selected. Even better would be to highlight and prevent selection.

#39

Hi!

The strategy here will be to do the following:

  • Upon clicking the row in the repeater, mark it
  • Add a condition to OnItemLoad of the repeater that disables the ListEntry widget if the row is marked.
  • Create a disabled interaction style for that widget defining how you want the already clicked rows to appear

Note that if you simply disable the widget by clicking it, when the repeater refreshes the disabled state of ListEntry is reverted to the state it was created in: enabled. But a marked row remains marked when the repeater refreshes. That’s why you add the condition to OnItemLoad:

OnItemLoad
  — do the stuff you're already doing —
  If value [[Item.isMarked]] is equal to true
    Disable ListEnty

Be careful that that the condition is an IF and not an ELSE IF, because when you create the condition, Axure (rather ineptly) defaults to ELSE IF, fully knowing that this condition will never execute a because the first one is simply IF (True). No matter: you can toggle between IF and ELSE IF on right-click of the condition.

Then, edit OnClick of the ListEntry widget in the repeater row:

OnClick
  — do the stuff you're already doing —
  Mark Rows This in AutoCompleteList

Be sure you choose the correct repeater whose row you want to mark! (I chose the wrong one when I was playing with this, and ‘This’ did not appear as an option, because OnClick isn’t being defined within that repeater.)

Then all you have to is define the disabled interaction style of the ListEntry widget, which is an option when you right-click it. A nice side-effect is that because clicked rows will now be disabled, the OnClick interaction of that widget will be ignored, which is what you want.

#40

Hi again -

It occurs to me that when you delete a tag from TagRepeater, you’ll want to re-enable the corresponding row in AutoCompleteList:

OnClick (of the 'x' in the TagRepeater row)
  Unmark Rows where [[TargetItem.ListEntry == Item.ListEntry]] in AutoCompleteList
  Delete Rows This in TagRepeater

Note that it’s important that the Unmark Rows command precedes the Delete Rows command.