This tutorial will explain how to mock-up a google like search functionality using Axure. The 3 main features for doing a complete search functionality are as follows
Let’s see how each of the above features and the logic was built.
Feature 1: Recent search list
When the user does a mouse on-focus on the search field the last “n” searched items will be displayed. Here I have set it n as 3.
Feature 2: Predictive auto-suggest
Feature 3: Auto correct
For auto correct feature there could be 2 scenario
For this mock-up I have mocked-up the scenario 2.
Now that the features are defined i will explain how the RP file was created. Basic components of the RP are Home(page), Search page(page) and header(master)
This is a master layout with all the components of the header logo, search box, other additional menu items. The input field is named “SearchInputbox” and there is another input button “Submitbutton”. Now you may think why two buttons? When the user types the search term he/she might either hit enter in the keyboard or click on search button, so we use both text input field and input button, but both have got to be linked.
The home page is the default page that the user will be and the search page displays the search results.
For this mock-up I have taken the following examples where user can search for
The below illustration would show you how the all the components are linked together.
I have attached the RP file