Some time ago, I wrote how freaking cool the auto-complete system is for ingredient entry. If you don’t believe me, go take a look at its implementation – I actually have it done. For the lazy ones – folks like me – it ended up looking something like this:

Sexy, huh?

Yea, whatever. I know what you’re gonna say – I’ve seen this a billion times.

You have, you’re right. But one thing you most likely never thought about when you used a similar sexy-auto-complete textbox: which matches show up?

Obviously, you want to show ingredient names that have the stuff that the user typed in as a substring. So, user types “vo”, you show “vodka” and “absolute vodka”. But you don’t want to show “Cuervo tequila”, do you? So, rule #1: only show stuff that has user’s substring as the beginning of the word.

Now, the more interesting question: how do you want the suggestions ordered? Few options here:

  1. Alphabetically. Simple to implement, easy to understand, cool. One problem: if there are 50 items that match (as there are with the substring “vo”), your auto-complete text box is not really useful.
  2. Depending on how frequently the item is used in cocktails. This is a pretty good measure of popularity; if there’s 100 cocktails that use orange juice, it’s probably because lots of people have orange juice in their bars, so you can infer that orange juice should show up before Stoli Orange for the query “ora”. However, this has drawbacks: what if your cocktail database is skewed? 
  3. Depending on the number of previous users of the system that have added this ingredient. This means that the system is getting smarter and smarter as the number of its users increases; this is definitely a good thing. Drawback: chicken-and-egg problem, you need initial users to make the system smart, and those initial users will suffer.

So far, I went with approach 2 – just because the site doesn’t have too many users yet (do let your friends know about it if you like it!), but I instrumented the tools necessary to know what ingredients users are adding, so I’ll switch to 3 at some point.


Cocktail Builder: JavaScript Alcoholic