Axure Tutorial: High Fidelity Search Box

Introduction

Search is a common feature. In Axure, you can call the search engine to search the text entered in the search box. Today we'll learn how to make high-fidelity search box that can call the Bing search engine.

Features to be Realized

1. After entering the search text, click the search button or enter to call Bing's search engine to search the entered text.

2. After the search box got focus, the recommended search items are displayed, and click the item to realize the text search of the item.

3. Click the category tags to switch the search of different category.

How to Realize these Features

1. After clicking the search button, open the website of the search engine + the entered words.

2. Make a recommended search list through the repeater, and save the search keywords in one column of the repeater. When you click items on the list, open the website of the search engine + keywords of items .

3. By judging the selected tag, open different URLs during search.

Preview the completed prototype for this tutorial


Widgets Setup 

Widgets Setup

Widgets include the following group:

1. Five tags in total. They are All, Image, Video, Map and News. The first one is selected by default. Sets the selection group for all tags.

2. Search box and search button. Assign the submit button of the search box to search button.

3. Recommendation list made with repeater. Where the address column is the keyword to search. The second column is the serial number of the item.

Make dynamic panel

Create the top search bar as a dynamic panel. Drag a frame into canvas and create it into a dynamic panel. pin the top search bar and frame bar panel to browser. 

Set the width of the frame as the screen width and the height as the screen height minus its y value.

Interactions Setup

Tags interactions setting

1. When the All tag is clicked, open a new link in the frame with the address:[[“https://www.bing.com/search?q=“+LVAR1]], Where LVAR1 is the text of the input box. Select this tag.

2. When the Image tag is clicked, open a new link in the frame with the address:[[“https://www.bing.com/images/search?q=“+LVAR1]], Where LVAR1 is the text of the input box. Select this tag.

3. When the Video tag is clicked, open a new link in the frame with the address:[[“https://www.bing.com/videos/search?q=“+LVAR1]], Where LVAR1 is the text of the input box. Select this tag.

4. When the Map tag is clicked, open a new link in the frame with the address:[[“https://www.bing.com/maps?q=“+LVAR1]], Where LVAR1 is the text of the input box.Select this tag.

5. When the News tag is clicked, open a new link in the frame with the address:[[“https://www.bing.com/news/search?q=“+LVAR1]], Where LVAR1 is the text of the input box.Select this tag.

Search icon interactions

When the search button is clicked, judge the currently selected tag, and open the corresponding URL + keyword in the search box.

Items interaction

Double click the repeater and select the item widget in the repeater. When the item is clicked, judge the selected tag and open the corresponding website + keyword. Hide the repeater and set the text of the search box to the keyword address of the currently clicked item.

Search box interactions

When the search box gets focus, the repeater is shown.

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.