Predictive Search

Axure RP 8
1

Hi,

I’m using repeaters to set up a predictive but can’t quite get the interaction to work. At the moment, when you start typing the suggestions appear but after that, the entire list reveals and stays on the page. I want it to only show the suggestions when a user types 1 or more letters.

Any help would be much appreciated!

Location predictive.rp (53.0 KB)

2

Hi!

You have a space in the field after “does not equal.” Remove the space and it works.

Note that you can get much better performance if you just set the filter once (filters stay in effect until you delete them), applying the filter OnLoad in the repeater. You can also add a second condition to your filter that will handle all of the showing and hiding for you, so you won’t need to do that manually.

[[Item.First_Name.toLowerCase().indexOf(LVAR1.toLowerCase()) == 0 && LVAR1 != "" ]]

The second condition (after the &&, which is an AND) basically says “AND return no rows if the search field is blank”

Then you just need to force the repeater to re-evaluate the filter OnTextChange rather than apply the filter there. A good way to do this is to set (or actually, reset) its ItemsPerPage to Unlimited.

Here’s how that looks: Location predictive.rp (54.0 KB)

1 Like
3

Wow the smallest thing! Amazing thank you!!

4

Now I am struggling with the styling - why am I unable to edit the width?

Also, in my prototype I have it placed inside a Dynamic panel (state 1) but I want the autosuggest drop down to show outside of the panel. For example, if you try to enter Cardiff, the drop down cuts offUni TT tabs only.rp (98.3 KB)

5

Hi!

If you right-click this dynamic panel and choose “fit to content” it will grow to its contents automatically. You’ll want to make your repeater row the same width as the entry field in that case, I’m guessing.

Note that if you ever manually resize (while authoring) a fit-to-content dynamic panel, Axure will turn the fit-to-content setting OFF.

6

Thank you a million!!

7

How to add the ability to make any of the items in the list clickable and then have that autosuggested results stay in the results box?

8

Hi axuredesigner.
Uploaded file that may help you, predictive search.rp (584.0 KB)

Regards,
Natalie

9

Thank you. There are a couple of details I can’t figure out.

  1. Once you click on a location, how do I hide the drop down rectangle?
  2. How to remove the text in the search box when user tries to enter a new location

search.rp (62.0 KB)

10

Hi axuredesigner,
I modified your search and added action on focus

image.png846×275 25.6 KB

search-edit.rp (118.1 KB)
Here a preview

Regards,
Natalie