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.

--

--

--

We Only Provide High-Quality Axure Tutorial, Axure Libraries, Templates.

Love podcasts or audiobooks? Learn on the go with our new app.

LinkedIn, you need to promote this more!

Usability Case Study — Ironhack Pre-work

How to deal with burnout

Redefining the Charity Experience

UX Case Study: Optimizing Email Marketing Tool

A New Way to Build a Brand Style Guide

A Conversation with BookMyShow’s Kiran Shivlingkar

Creating the change we want to see in the world, one empty building at a time.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Well Joe

Well Joe

We Only Provide High-Quality Axure Tutorial, Axure Libraries, Templates.

More from Medium

Axure Tutorial: Top Navigation Menu — Repeater Intermediate Tutorial

Providing curated content in one single space through a digital magazine

User personas, a quick introduction

UX Salman: short intro