Creating AJAX-style auto complete functionality within Axure prototypes

I am currently building a prototype for a client which early on requires a demo to users of the system, and I really wanted to put the time into building a prototype that was as realistic as possible. With that in mind, I wanted to build an Ajax-style auto complete field that demonstrated the functionality and potential use of the field in the system.

The idea was to just build a simple text field for ‘first names’ with a dynamic panel that would refine the options based on the input – standard auto complete functionality.

So drop on a text field and a label, name them to distinguish what field is what, then put a dynamic panel underneath the text field, as shown in the screen shot.

Building the groundwork

zrclip_001p68bcb7be

Now the action we want to capture is the entering of data into the text field, and for this purpose, Axure provides the ‘OnKey’ action. Typically auto complete fields are shown after a few characters are entered, so I setup mine to display after two characters, then display a drop down of 5 results.

So in your dynamic panel, line up a table displaying 5 results that will sit just below the text field. As a useful extra, I bold the first two letters to give more context to what’s happening.

zrclip_003n5a06f5d2

Handy Note!

To help line it up underneath your text field, go back to the ‘page’ view when only have one state for your panel, and you will see the list in context and allow you to place it.

Now we need to add some more panels for each extra character typed. For my example I have five in total, each with a slightly refined ‘results’ list.

For every panel state, the list gets refined a little further, an extra letter gets bolded, and there should be an extra panel or two for ‘selecting’ an option.

image

Creating the logic & displaying the panel states

Once all the panel states are complete, the interactions are created on the page, using the ‘OnKeyUp’ event on the ‘First Name’ text field.

Add an ‘OnKeyUp’ interaction with two conditions:

Length of widget value – set this to ‘2’.

Text on widget – set this to the fist two characters of your results set.

image

and set the action for this to be the panel state created first, which shows the 5 results.

image

The panel for selecting an option should both highlight the option being selected and put the selected word in the text field.

image

The above screen shows the selected option highlighted, and the ‘OnClick’ action for the selected option uses the ‘Set text on widget’ action to set the text field to the selected option.

image

This needs to be repeated for the other panels, but changing the length and value conditions.

The overall interactions window should look something like the following.

image

The finished product!

The final rendered version should look like the following and work flawlessly!

image

This process can be repeated for other results sets / inputs to give more than one scenario, but generally no than two scenarios are required for a prototype.

If anyone wishes to get a copy of the .rp project or the .rplib for the master, I can put this up as well.

Happy prototyping!

Advertisements

8 thoughts on “Creating AJAX-style auto complete functionality within Axure prototypes

    • Glad to hear you liked it! I was going to go further in with more states and conditions to refine the options and go for another entry, but that might have to wait for a while!

  1. Pingback: Tweets that mention Creating AJAX-style auto complete functionality within Axure prototypes « Hamish's Blog -- Topsy.com

  2. Pingback: Replicating AJAX-style lightbox within Axure prototypes « Hamish's Blog

  3. Hi,

    Me too please on the rp. And thanks so much for sharing your Axure experience. I’m relatively new to axure but an experienced sharepoint guy so this is very helpful.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s