typeahead multiple columns - autocomplete

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">',
'Alle Ergebnisse <i class="fa fa-chevron-right"></i>',
'<div>'
].join('\n'),
header : [
'<strong>Beiträge</strong>'
].join('\n'),
suggestion: function(data) {
return '<div class="headline-pic" style="background-image: url("' + data.image + '"); background-size: cover;">' + data.name + '</div>';
}
}
},
{
name: 'pages',
source: substringMatcher(pages),
templates: {
header : [
'<strong>Seiten</strong>'
].join('\n'),
suggestion: function(data) {
return '' + data.name + '<br />';
}
}
}
{
name: 'customs',
source: substringMatcher(cpts),
templates: {
header : [
'<strong>Mitarbeiter</strong>'
].join('\n'),
suggestion: function(data) {
return '' + data.name + '<br />';
}
}
});
</script>