This tutorial will explain how to mock-up a google like search functionality using Axure. There are 3 features for the search functionality
Recent search list
When the user does a mouse on-focus on the search field the list of last searched items will be displayed. This demonstration shows last 3 search keyword..
When user keys in the search keyword there will be a list of suggestions matching to the query that would appear. The suggestions will narrow down further as the user types more strings. The following rules apply for this,
Auto correct is the feature that will suggest the correct keyword in case the user misspelled his/her keyword. For auto correct feature there could be 2 scenario
Create Axure file:
Now that the features are defined i will explain how the RP file was created.
Search result page have a dynamic panel with three states fruit, No results-found and auto-correct. When user search for the right keyword in this example “fruit” the dynamic panel fruits will be displayed. If the user types any other keyword which has no results the No results-found state will be displayed. If the user misspelled “froot” instead of “fruit” but yet there is one result for “froot” the auto-correct state is displayed which shows the single result for “froot” and asks the user “did you mean fruit”.
The below illustration would show you how the all the elements i have listed above are linked together. I have attached the RP file