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 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.
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
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.
When the search button is clicked, judge the currently selected tag, and open the corresponding URL + keyword in the search box.
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.
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.
If you like the article, please share it with others with page link, thanks for your supporting! ❤
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