How to present a long list of autocomplete items beside a short list

Question

We have the requirement to implement the autocomplete feature for the search textbox. That's when user enters a certain search term, the web should bring the suggestions that let her/him do these following:

• Drug-related actions (view different types of content)
• Search-related action (search in different categories)

This is my initial design where I split the autocomplete into 2 sections.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Now the issue is : sometime the Drug-related part can be very long (expand into full page), while the Search-related part is very short. Therefore, it is difficult to perform Search-related action.

Qns: how to make it easier for user to view & search drugs at the same time, and in a convenient way ?

Answer 1

This is an interesting search related article: 7 things I wish every search box did. Especially number 2 is of use in this case.

I'll quote it:

SEARCH ACROSS MULTIPLE ATTRIBUTES

When looking for something, such as a contact, users will often only remember pieces of information, such as this person’s first name, the company they work for, where they live, etc. You use these touch points to hit the right result. You want to allow your users to type “John London Macy’s” and find the right John.

Everywhere that makes sense to your users should be searched: name, title, tags, location, company, author, merchant, factory, platform, etc. And it must do so seamlessly, without the need for your users to specify the attribute they want to search in.

In your case, what the author means, is you should allow the user to type aspirin article or aspirin 300 that will result in every article about aspirin or give 'Aspec 300' as a result. In the last case the user might not remember the full name of the aspirin they are searching for but just the 300.

I hope this helps.

Answer 2

Couple of options:

• have them specify what sort of search they are doing ahead of time
• Specify a keyword within the search that specifies what sort of search it will be. i.e. search:asprin
• try a different approach than a two column layout maybe it's a stacked layout with different categories where each category has a header "searches" or "drugs" and you show only the first few key items under each category and you could click to see more results. This is the Mac spotlight method
• if you are married to the two column layout you could set the maximum height for the dropdown in general and if either column is taller than that you simply scroll within that column. This way it's more uniform looking