This post has already been read 7064 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!
loading...
Very cool. I just created something very similar in a prototype, but only going to 2 letters in because it seemed a bit daunting to go further. Nice!
loading...
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!
loading...
Hi,
Can you post the rp file or the rplib for this? I found myself lost after doing the dropdowns
Great stuff you have here! Cheers.
loading...
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.
loading...
Very good tip.
Thanks ^^
loading...
Great tip! Thanks!
loading...
Hi Hamish’
Thanks a lot for sharing.
I just realised that when user is typing uppercase it’s not working.
Do someone have a solution to this?
Thanks a lot!
Sarah
loading...
Once a user selects davidson, how do you hide the auto suggested drop down area?
loading...
This is why people should be prototyping using html and JS. When the prototyping takes longer than the implementation there’s something not right. Not to mention with html and JS you have a functional framework for the real site at the end of the prototyping phase.
loading...
Agreed, but in many cases those skills are not available to the people involved in early-stage project work within the corporate world and tools such as these can have their place. I would argue something not strong enough in JS and HTML/CSS tasked with building a prototype would not do not much better than generated content such as this.
loading...