typeahead multiple columns

Question

I am using typeahead to add autosuggest functions to a wordpress searchform. As a result I expect two columns, column 1 -> Posttype Post, column 2 -> Posttype page seperation like a hr, followd by posttype media.

I am using three datasets (for every posttype a unique dataset), so frontend renders 3 "tt-dataset". As I am using foundation I would need to add a div class="row"before the datasets, add a "large-6 column" after the "tt-dataset" class and add a closing after every "tt-dataset" as well a a closing div for the row.

I think I could add these classes using JS, but I just doesn't feels right. is there any out-of-the-box solution I am missing? Thank you guys!

My Code up to now, it's hardcoded as I am prototyping right now.

<script  type="text/javascript" src="typeahead.bundle.js"></script>
<script type="text/javascript">
var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
    var matches, substringRegex;

    // an array that will be populated with substring matches
    matches = [];

    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');

    // iterate through the pool of strings and for any string that
    // contains the substring `q`, add it to the `matches` array
    $.each(strs, function(i, str) {
      if (substrRegex.test(str)) {
        matches.push(str);
      }
    });

    cb(matches);
  };
};

var posts = new Array();
posts[0] = new Object();
posts[0]["name"] = "test Name";
posts[0]["url"] = "http://www.google.com";
posts[0]["image"] = "https://placeholdit.imgix.net/~text?txtsize=19&txt=the_post_thumbnail%28%29&w=450&h=250&txttrack=0";
posts[0]["tokens"] = "Post", "Thumbnail", "test";
posts[1] = new Object();
posts[1]["name"] = "test Name2";
posts[1]["url"] = "http://www.bing.com";
posts[1]["image"] = "https://placeholdit.imgix.net/~text?txtsize=19&txt=the_post_thumbnail%28%29&w=450&h=250&txttrack=0";
posts[1]["tokens"] = "Post", "Thumbnail", "test";
posts[2] = new Object();
posts[2]["name"] = "test Name3";
posts[2]["url"] = "http://www.yahoo.com";
posts[2]["image"] = "https://placeholdit.imgix.net/~text?txtsize=19&txt=the_post_thumbnail%28%29&w=450&h=250&txttrack=0";
posts[2]["tokens"] = "Post", "Thumbnail", "test";
posts[3] = new Object();
posts[3]["name"] = "test Name4";
posts[3]["url"] = "http://www.google.com";
posts[3]["image"] = "https://placeholdit.imgix.net/~text?txtsize=19&txt=the_post_thumbnail%28%29&w=450&h=250&txttrack=0";
posts[3]["tokens"] = "Post", "Thumbnail", "test";
posts[4] = new Object();
posts[4]["name"] = "test Name5";
posts[4]["url"] = "http://www.bing.com";
posts[4]["image"] = "https://placeholdit.imgix.net/~text?txtsize=19&txt=the_post_thumbnail%28%29&w=450&h=250&txttrack=0";
posts[4]["tokens"] = ['Post', 'Thumbnail', 'test'];
posts[5] = new Object();
posts[5]["name"] = "test Name6";
posts[5]["url"] = "http://www.yahoo.com";
posts[5]["image"] = "https://placeholdit.imgix.net/~text?txtsize=19&txt=the_post_thumbnail%28%29&w=450&h=250&txttrack=0";
posts[5]["tokens"] = ['Post', 'Thumbnail', 'test'];
console.log(posts);

var pages = new Array();
pages[0] = new Object();
pages[0]["name"] = "Page 1";
pages[0]["url"] = "http://www.google.com";
pages[0]["tokens"] = "Impressum", "Imprint";
pages[1] = new Object();
pages[1]["name"] = "Page 2";
pages[1]["url"] = "http://www.bing.com";
pages[1]["tokens"] = "Datenschutz";
pages[2] = new Object();
pages[2]["name"] = "Page 3";
pages[2]["url"] = "http://www.yahoo.com";
pages[2]["tokens"] = "AGB";
pages[3] = new Object();
pages[3]["name"] = "Page 4";
pages[3]["url"] = "http://www.google.com";
pages[3]["tokens"] = "Kontakt", "contact";

var cpts = new Array();
cpts[0] = new Object();
cpts[0]["name"] = "CPT 1";
cpts[0]["url"] = "http://www.google.com";
cpts[0]["tokens"] = "John", "Doe";
cpts[1] = new Object();
cpts[1]["name"] = "CPT 2";
cpts[1]["url"] = "http://www.bing.com";
cpts[1]["tokens"] = "Jane", "Doe";
cpts[2] = new Object();
cpts[2]["name"] = "CPT 3";
cpts[2]["url"] = "http://www.yahoo.com";
cpts[2]["tokens"] = "Max", "Muster";
cpts[3] = new Object();
cpts[3]["name"] = "CPT 4";
cpts[3]["url"] = "http://www.google.com";
cpts[3]["tokens"] = "Marianne", "Muster";



$('.typeahead').typeahead({
    hint: true,
    highlight: "any",
    minLength: 0,
    maxItem: 15,
    maxItemPerGroup: 2,
    searchOnFocus: true,
    matcher: function () { return true; },
},
{
    name: 'posts',
    source: substringMatcher(posts),
    display: ['tokens','name','url'],   
    templates: {
        empty: [
            '<div class="empty-message">',
                'Zu Ihrer Suchanfrage konnten leider keine Treffer gefunden werden.',
            '</div>'
        ].join('\n'),
        footer : [
            '<div class="see-all-results">',
                '<a href="#">Alle Ergebnisse <i class="fa fa-chevron-right"></i></a>',
            '<div>'
        ].join('\n'),
        header : [
            '<strong>Beiträge</strong>'
        ].join('\n'),
        suggestion: function(data) {
            return '<div class="headline-pic" style="background-image: url(&quot;' + data.image + '&quot;); background-size: cover;"><a href="' + data.url + '">' + data.name + '</a></div>';

        }
    }
},
{
    name: 'pages',
    source: substringMatcher(pages),
    templates: {
        header : [
            '<strong>Seiten</strong>'
        ].join('\n'),
        suggestion: function(data) {
            return '<a href="' + data.url + '">' + data.name + '</a><br />';
        }
    }
}
{
    name: 'customs',
    source: substringMatcher(cpts),
    templates: {
        header : [
            '<strong>Mitarbeiter</strong>'
        ].join('\n'),
        suggestion: function(data) {
            return '<a href="' + data.url + '">' + data.name + '</a><br />';
        }
    }
});
</script>