Show multiple results on one row for typeahead.js or autocomplete.js

Question

I'm looking to build an autocomplete text widget similar to the "Buy me a pie app" autocomplete. (See http://buymeapie.com/ for an image of the auto complete )

What I'm looking to do is use JQuery autocomplete or typeahead.js to show multiple results in a row of the dropdown.

Any suggestions of how to implement would be appreciated :-)

Answer 1

If you are using typeahead.js you can modify its look and feel as the documentation says: https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#look-and-feel

The HTML structure of the drop down menu looks like this:

<span class="tt-dropdown-menu">
  {{#datasets}}
    <div class="tt-dataset-{{name}}">
      {{{header}}}
      <span class="tt-suggestions">
        {{#suggestions}}
          <div class="tt-suggestion">{{{suggestion}}}</div>
       {{/suggestions}}
       {{^suggestions}}
         {{{empty}}}
       {{/suggestions}}
      </span>
      {{{footer}}}
    </div>
  {{/datasets}}
</span>

First you have to set a width to the div with class .tt-dropdown-menu:

.tt-dropdown-menu {
  width: 422px; 
}

Then, you have to set the display of the .tt-suggestion div to inline or inline-block:

.tt-suggestion {
  display: inline-block;
}

Here is a fiddle: http://jsfiddle.net/dtengeri/7wftL/