Creating AJAX-style auto complete functionality within Axure prototypes – UPDATED

This post has already been read 904 times!

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

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.

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.

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.

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

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

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.

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.

The finished product!

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

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.

UPDATE #1 – Due to popular demand (over 500+ downloads) have updated this to fix issues with Axure 6.x importing. Apologies for the delay in resolving this issue!

http://www.hamishking.com/wp-content/files/AJAX-autocomplete_example_v6.rplib

Happy prototyping!