Dynamic auto suggest using repeater widget

Axure RP 8
1

During some research I stumbled upon the following thread where someone introduced using a repeater to have a dynamic auto suggest field (one that actually shows suggestions based on what you type, instead of always the same suggestions): Auto-Suggest

I liked the approach and figured it could be improved a bit more. Just wanted to share what I built in case it might be helpfor for others.

See it live
Autocomplete_Repeater_JP.rp (67.7 KB)

What it does:
[ul]
[li]Uses a list of all countries in the world as an example. Simply change the repeater data to something that makes sense for your application.[/li][li]Limited to showing 5 items. Change that via the paging options of the repeater.[/li][li]It finds any items that contain the text you type in, no matter where (start, middle, end of string).[/li][li]The typed text is highlighted in bold.[/li][li]The suggestions are not case sensitive, but the shown suggestions adapt to show upper or lower case letters.[/li][/ul]

Feedback and improvements are also welcome. :slight_smile:

3 Likes
2

I like it. Though you do need to make sure your repeater disappears when you clear the search field.

What I’d love to ask is (Because I’ve been doing something quite similar myself in a recent project) if you think there is a way to, once there are options displayed below the search field, tab through the possible matches using the cursor keys.

3

Wow - that’s very elegant!

Since you asked for improvements :), you could make it significantly faster by doing the following:

  1. Set the filter just once, in the OnPageLoad handler, but change it to this:
    [[Item.ListEntry.toLowerCase().indexOf(LVAR_SearchText.toLowerCase())>=0 && LVAR_SearchText != ‘’]]

(That’s two single quotes at the end.) The bolded part above causes the repeater to return no rows when the search field is blank. So now you don’t have to hide and show the repeater conditionally. Filters hang around once you create them, so if it’s the same each time, you only have to define it once.

  1. In the OnTextChange handler, re-trigger the filter specified above by performing an Update command that does nothing. (In the update command, just set the rule to [[true]] and don’t specify any column to change.) The OnTextChange handler will look like this:


Here is the speed improvement: See it live.

4

Been looking at the original rp file a bit more and there is one question I have regarding the substring function.

When defining the variable TextAfter, you set it to the value

[[Item.ListEntry.substr(Item.ListEntry.toLowercase().indexOf(SearchTerm.toLowercase())+SearchTerm.length)]]

Now I understand (Or at least, I thought I did) the substring function -

[[LVAR.substr(n,x)]]

Where n = the index of the string start; and x = length of string.

But in your file, there is only one number (No comma) -

[[LVAR.substr(x)]]

Why is this? I’m almost certain this is down to my not understanding javascript more, so I’m just looking for a bit of extra knowledge here.

5

Hi James -

The length parameter is optional. If left out, it takes the remainder of the string from the specified start point. Here’s a reference.

1 Like
6

Hello,

Do you know how to take the default text “Search” out of the field?

Thank you,
Meaghan

7

Nevermind, I found it!

8

This is great! Is anyone else running into problems with the text field not showing any formatting changes when published? Axure shows my changes, but when published it defaults back to the original style. I don’t see any overriding style rules and feel a bit perplexed about what’s going on. Any help would be greatly appreciated.

9

Hi roosh,

Hmm, a few thoughts:

  1. Please clear your browser cache or view your project in Incognito mode. Does that save the changes?

  2. Are you seeing the same thing when using “Preview”?

  3. How about when viewing on different browsers?

  4. What version of Mac or Windows are you running?

  5. What version of Axure RP are you running?

  6. Lastly, could you post a screenshot of the difference you’re seeing in Axure RP vs. the output?

These should help us to get a better sense of what’s happening with the text field. Thanks!

10

Hi,

The format doesn’t show the changes regardless of cache/incognito mode, preview vs. publish, or browser (tried in both Chrome and Safari).

I’m running OSX Yosemite (10.10.5) and Axure 7.0.0.3189.

I’ve attached what it looks like in Axure vs. live.

Thanks!



11

Hi roosh,

Thanks for following up! I see the problem now. I’m seeing that the text field changes to a smaller input field with an “x” at the end when the “Input Type” is set to “Search”–does that sound right?

If so, the Text Field widget is a form-type widget which turns into a real HTML form element in Axure RP’s HTML output. This widget has limited styling options because its formatting is largely controlled by, and rendered differently in each browser. Thus, they’re generally difficult to get cross-browser consistency. For example, you’ll see that Chrome and Safari outputs the text field differently, while Firefox renders it as is.

If you want the text field to show up as WYSIWYG, you’ll have to style it individually (e.g. layer with Rectangle widget), or change the “Input Type” to “Text”. Hopefully this helps!

12

Hi . I need a working prototype for search autocomplete just like any other search autocomplete sites. Was wondering if you have any good ones that i can take reference from. Am currently a UX/UI designer.

13

The first post at the top of this thread has a .rp file that you can reference. If you browse the forums, there are some other posts with sample .rp files that demo the predictive search/autocomplete functionality:

Predictive Search with auto-complete in the search box?

Auto-Suggest

Adding formatting to text in Auto Complete using repeater

Hopefully one of those helps!

14

Hi … This is a very interesting and useful thread - thanks! I am an Axure beginner, though - what would be a good way for me to begin to develop some useful knowledge of the conditional logic language? I’m trying to learn from the shared .rp files - is there a better way? Thanks!!!

15

Hi KeithK,

Please check out some of our training documentation at our website as well. Here’s a link to the conditional logic guide:

Conditional Logic

There are also some tutorials listed along the left-hand navigation, too. Here’s one that incorporates conditional cases:

Required Fields

If you have any questions about implementing something in your project, please don’t hesitate to start a new thread on the forum or even email our support team at <support@axure.com>. HTH! :slight_smile:

Alex

16

Can someone help me - I only want to return ‘starts with’ data from the repeater. in the file Autocomplete_Repeater_JP.rp I see a filter:

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

Is this what you need to adjust?

17

To filter based on what the data starts with, try this:

[[Item.ListEntry.toLowerCase().substring(0,LVAR_SearchText.length) == LVAR_SearchText.toLowerCase()]]

This will check LVAR_SearchText against the first n characters of Item.ListEntry, where n is the number of characters entered (LVAR_SearchText).

3 Likes
18

Thanks! That works.

19

Hi Jaern,

why did you create two variables for the search field. A global variable “SearchTerm” and a local variable for the filter rule “LVAR_SearchText”?

I would like to understand the logic behind this. Anyone knows the answer?

Thanks in advance

20

Hi Honey,

The “LVAR_SearchText” local variable and the “SearchTerm” global variable both reference the same thing: text on the SearchField widget, so it might’ve just been personal preference. You can test this by replacing LVAR_SearchText with SearchTerm and you’ll see that you get the same results.

1 Like