How to show multiple value in jQuery autocomplete?

Question

I am trying to design a multi-column select/search box as the one shown below.

I thought about using jQuery-UI Autocomplete widget. I will make the list appear in focus so the user can select directly from the list or start typing in the search box to filter the data shown.

I know I can feed the Autocomplete an array of objects as the source and decide a label to be shown as the selected item when the user selects a row.

What I want is to show more than two columns on the list. Any idea how to accomplish that?

thanks,

Answer 1

Use autocomplete renderItem to customize your search results. For multiple column view, use html code in rendering to render table like view. And then use this library to render html in autocomplete UI.

Answer 2

I ended up using typeahead.js from twitter.

Paired with the bloodhound engine it gives the ability to specify costume templates for the list.