Axure tutorial - Building a predictive search field

In this walkthrough I’ll use Axure RP’s more advanced features to make a realistic search field.

When it comes to designing a complex interaction, Axure RP is my go-to tool. For better or worse, nothing else comes close to the level of fidelity Axure offers in your prototypes.

In this walkthrough we’ll make a fully interactive and realistic predictive search field. This prototype uses some of Axure’s more powerful features, such as :

  • Conditions
  • Variables
  • Repeaters & filters

In 45 minutes we’ll make something fully interactive that can be user tested just like the real thing!

Here’s the tutorial :

Download the .RP file

Here’s the forumula that we used to build the ‘search’ filter :

[[(Item.value.toLowerCase()).indexOf(LVAR1.toLowerCase()) >= 0]]

Found this useful? Why not share it?

Chris Myhill, an incredibly handsome UX designer with over 8 years of experience

Chris Myhill

Chris heads up Just UX Design with over eight years of experience.

He’s worked on loads of different projects, using UX wizardry to help businesses make better products.

Learn more about Chris

← back