javascript - 先行入力ドロップダウンのグローバル フッター

Question

2 つのカテゴリを持つ先行入力メニューがありますが、これらのカテゴリの下にボタンが必要です。このグローバル フッターを追加して、2 番目のカテゴリがない場合に利用できるようにするにはどうすればよいですか?

Answer 1

私がしたことは、各データセットにフッターを追加することですが、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;
}

お役に立てれば！