How to create a droplist component with a searchable input field - Axure Noob

newbie-question
rp-10
#1

Hello Axure Community,

I’m writing this blog post to share a challenge that I’m facing and to ask for your help. I’m working on a component for a project that requires a search bar that can also function as a droplist. The idea is that the user can either type in a query or select an option from a list of predefined choices. I’ve been trying to figure out how to create this using Axure, but I haven’t found a solution yet. Do you have any suggestions or tips on how to achieve this functionality? I would appreciate any input or feedback. Thank you for reading!

Best,

  • Kadeem
#2

Hi kaiju, there’s an example of how to do this included with Axure 10. Check the ‘Sample Form Patterns’ library. You’ll see two ‘Predictive Search’ patterns you could adapt.

You would usually achieve this by pairing a text field with a repeater with your results. The repeater would be hidden by default, then appear if the user clicks on a dropdown icon (showing all items) or if they enter text (showing the repeater but filtering it by the entered text).

If you’re new to Axure and/or none of the above means anything to you, I strongly recommend this Axure Noob to Master Youtube Playlist. For the specific thing you’re trying to do, this video breaks down the hidden repeater method.

#3

I appreciate your detailed explanation @davegoodman !I was considering the option of using the text field and the repeater together, but I am not very familiar with how to use variables for this purpose. I will check out the sample you provided and get back to you with my results.

Best regards,

kaiju