I am designing an autosuggest feature on a quick-search box. Suggestions will include small icons, multiline text, etc. The application is handling orders. The search field will recognize a variety of different meaningful terms – e.g. customer surname, order id, etc. But when an order ID is input, I want users to get an opportunity to view either the order, or the person. I was thinking that I would like a hierarchy within the list – so if i type 1234, and it matches 5 orders for 3 different people, the 3 people are returned at the top level, and their 5 orders underneath the respective customer.
Quick mockup:
Has anyone seen something like this implemented elsewhere? Don’t want to re-invent the wheel. Also interested in any other feedback.
Answer to your question: No, haven’t seen this elsewhere.
Feedback on your mockup:
I would say that it is a pretty creative autosuggest solution.
However, I think it is overkill though. If I just want to quickly navigate to the Order page by searching a specific Order ID (and expecting only one result in the autosuggest), but the autosuggest shows up five order items under three people (as shown in your mockup), I think that is way too much, put aside performance.
My idea:
Each autosuggest item contains one Primary Line that can clearly identify the item and additional Details Line(s) that provide more description about the item, similar to Google’s search result page and Facebook search autosuggest.
For example, the autosuggest shows up each item like this when users search for an order:
You can make each order item (Loaf of Bread, Soda, more) link to the respective order item line in the Order page, and each person name to the respective person page. This method is more concise and takes less space than your mockup while still providing the functionality that you want.
Sometimes, simple is better, less is more. Remember the KISS principle. Think of Apple iPod and iPhone as examples.