Global Footer In Typeahead Dropdown

I have a typeahead menu with 2 categories, but under those categories I need to a button. How can I add this global footer, so it will be available when the 2'nd category is missin

Solution 1:

What I did is to add a footer in each dataset but hide all but the last one with CSS, here's the code :

$('#search-query').typeahead([
        {
            remote: appUrl + 'franchiseesuggestions?query=%QUERY',
            name: 'franchisees',
            minLength: 3,
            valueKey: 'Name',
            template: [
                '<p><strong>{{Name}}</strong></p>'
            ].join(''),
            header: '<pclass="tt-header">' + franchisees + '</p>',
            footer: '<pclass="more"><ahref="/recherche?q=%QUERY">All results</a></p>',
            engine: Hogan
        }, {
            remote: appUrl + 'citysuggestions?query=%QUERY',
            name: 'cities',
            minLength: 3,
            valueKey: 'Name',
            template: [
                '<p><strong>{{Name}}</strong></p>'
            ].join(''),
            header: '<pclass="tt-header">' + cities + '</p>',
            footer: '<pclass="more"><ahref="/recherche?q=%QUERY">All results</a></p>',
            engine: Hogan
        }
    ])

And the CSS magic :

.tt-dropdown-menu.more{
    display:none;
}

.tt-dropdown-menudiv:last-child.more {
    display:block;
}

Hope this helps!