Autocomplete: Fruit & Vegetable form

Autocomplete: Fruit & Vegetable form

I want to build an autocomplete form using jQuery. It is a very custom and specific version, and the best way for me to explain it is to think of it as a form for looking up fruits and vegetables.

This form will do what jQuery Autocomplete normally does, which is look up items based on what is typed in the form, as so:



However, I also want it to search for items based on the category or type of item it is. For example, if you start typing in "Fruits", it'll give you the list of all the fruits in the database, as so:


Finally, when you hover over the items it should be able to tell you additional information about the item without clicking on it. In our example, it should give you the amount of calories in each fruit/veggie:


How do I get started in making this form using jQuery Autocomplete, if possible at all.