Axure Tutorial: Repeater Intermediate Tutorial — Dropdown Search
Introduction
Making drop-down search box is what we often need to do in prototype design. In this tutorial, we will learn how to quickly design a drop-down search box through repeater.
Features to be Realized
1. When the input box text changes, the dropdown list show the content of the search.
2. When the item in the dropdown list is clicked, the input box show the item text.
How to Realize these Features
1. When the text of the input box changes, add a filter in the drop-down list to filter the text entered in the text box.
2. When the item of setting the drop-down list is clicked, the input box displays the item text of the drop-down list.
Preview the completed prototype for this tutorial
1. Widgets Setup
1. Drag a Text Field into canvas and name it Firstname.
2. Drag a Search Icon into canvas and put it on right position.
3. Drag a Repeater into canvas, then add a new row data.
4. Create a dynamic panel including the Repeater and a box, Naming it Search Panel.
2. Set Interaction
1. Select the text field, add the interaction of [when TEXT CHANGED], add a new action of [Add Filter], and set the repeater rule: [First_Name] [contains] [Text on widget] [First Name].
2. Add GOT FOCUS action: Show Sesrch Panel and set selection state.
3. Double click the repeater, select the rectangle, and add [Click OR TAP] to assign the text of the rectangle to the search text field, hide the search panel, and unselect it at the same time.
4. Hide search panel by default.
5. Sets the selected style of the search box.
In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.
Note: Click here to download the completed RP file for this tutorial (RP 10 or up).
Well Joe @AxureBoutique, a technical writer and teacher, focuses on Axure prototype design and product design.