提前打印下拉列表中的全局页脚

Global footer in typeahead dropdown

本文关键字：全局 打印 下拉列表      更新时间：2023-09-26

我有一个包含两个类别的typeahead菜单，但在这些类别下我需要一个按钮。如何添加此全局页脚，以便在缺少2'nd类别时可用？

我所做的是在每个数据集中添加一个页脚，但使用CSS隐藏除最后一个之外的所有页脚，代码如下：

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

还有CSS的魔力：

.tt-dropdown-menu .more{
    display:none;
}
.tt-dropdown-menu div:last-child .more {
    display:block;
}

希望这能有所帮助！

相关文章：