👉 Be sure to use “View all results” as your button copy, instead of “View more” — users want to know they’re exiting the mini-widget to a more usable “page” of results (complete with filters, etc).

💊 RiteAid’s hierarchy makes sense. Show keyword suggestions first, then categories and products in their own lane

🏈 Dick’s Sporting Goods applies gray shading to its product and brand results, keeping the focus on keywords — which are the most relevant suggestions anyway

💡 1st Dibs stacks several suggestion sections, limiting some to 3 hits to keep it easy to scan

🐟 Bass Pro Shops’ search and category sections are marked with icons — but they’re not as easy to decipher as headings and clear separation (still nice, though)

💡 Matalan uses a spacer line to separate search suggestions from product hits

🛀🏽 Lush loads product results and filters directly into its search widget, without the need to jump to a results page (built with Algolia)

🪮 Amika does similar (using Searchspring), but lacks filters

🥜 Depending on your catalog and industry, this could be a cool feature - but I suggest implementing this for desktop only, and keeping copy as tight as possible

💊 CVS knows its customer and which search filters to promote to its typeahead widget (this tactic won’t work for every site or brand — but could work great for grocery, travel, marketplaces and sites that sell in bulk)

💍 Ritani sells high ticket diamonds and understand that price tells more of a product story than thumbnails and product titles. Including this detail makes sense (though a redesign could make it easier to scan/read)

👗 Fashion Nova lets you scope typeahead suggestions by top-level department. While I suspect most shoppers won’t “see” the tabs, this does provide more precise recommendations for a better search results page

🩳 Chubbies uses its typeahead real estate well with large and easy-to-preview thumbnails, rather than the tiny icons so many merchants use

🩳 Contrast the above with small images - which do you prefer?

🔨 If your search app supports it, nesting category filters under specific search suggestions helps customers pull even more focused results. This example is Lowe’s, using Bloomreach

😬 This example shows 2 product hits in the widget when 8 matches exist in the catalog

👖 Betabrand lets you preview and toggle thumbnails for color variants — I love the innovation (though larger thumbnails may make this easier to use)

🔍 And don’t forget a “Clear History” link!

🔍 IKEA shows recent product views annotated with the search term used to find it — this is cool and innovative, but may not be as helpful as listing the searches themselves. This list can get long, and it’s really a “recently viewed products” list vs recent searches

😁 This simple touch helps customers gauge how many results they’ll get for each suggestion — this goes both ways — some shoppers want to go wide, others to hone in on a tight set

🔍 Bold styling to suggested attributes makes them easier to scan, but…

🔍 …colored bold type is even better!

🔍 Contrast this with highlighting the input term — you’re reinforcing relevance but focusing on the wrong detail

😬 Without any user input, this typeahead widget is pushing 18 (!) links in one mobile screen

😬 This widget resembles a full Collection page, complete with filtered nav

😬 This search box is hard to see sliding from the top with so much competing merchandising

😬 This widget looks like a main nav flyout menu

😬 Notice the suggestions below are all over the place, crossing every department and pet type. How are dog crates, aquariums, leak-proof dog pads and litter boxes “related products” to an empty search box?

😬 Flickering suggestions are distracting with rarely-relevant matches

😃 After 3 — even 4 characters provides a more chilled out (and relevant) search experience

😬  It’s impossible to choose from such a list without visual context, plus no title keywords match the input query

🤔 It’s possible that product titles give enough context for books — but this must be validated with data and real users

🤔 Banners are uber-popular in menu flyouts, but rarely add value to the typeahead experience. Again, users are focused on a specific task and less receptive to ads, merchandising and other calls to action

🤔 At worst, they can compete so much with suggested results that users don’t understand what’s happening

👗 Here you see a specific term “slip dress” suggesting broader categories. None of the suggestions are search terms, and none match the contextual keyword “slip”

✂️ Here it’s unclear whether results are for search terms or categories — they sure look like categories due to the Capitalization

😑 Chip-style links are popular but muuuuuch harder to read due to lower-contrast type-to-background and ragged alignment

😑 Horizontal aligment is also harder to scan and requires a scrolling action. Is it ironic that eye-care brands make autosuggestions so hard to read?

😑 Remember, autosuggestion began as autocompletion of search terms to help users hit the most relevant set of results faster. Make sure you stay true to the spirit of the search widget — give customers search term suggestions, and prioritize them above other suggestion types

😬 I admit this is a clever idea, but it falls apart when queries get long

😫 This merchant forgot the Go / Search / Submit / See results button, meaning customers must select a matching product hit. This is unexpected and confusing to customers, and doesn’t enable them to browse results together

😫 It’s just harder to read — especially when hero banners are dark