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

Dropdown Search

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.

Search Panel
4. Create a dynamic panel including the Repeater and a box, Naming it Search Panel.

2. Set Interaction

Add filter1. 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].

Got fucus

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.


Leave a comment

Please note, comments must be approved before they are published

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.