【问题标题】:Global footer in typeahead dropdown预输入下拉菜单中的全局页脚
【发布时间】:2013-08-13 10:43:53
【问题描述】:

我有一个包含 2 个类别的预输入菜单,但在这些类别下我需要一个按钮。如何添加此全局页脚,以便在缺少第二个类别时可用?

【问题讨论】:

  • 你能发布你的代码吗?
  • 您是否尝试过查看预输入示例twitter.github.io/typeahead.js/examples,特别是它们应用自定义template 的地方?
  • Pricey,该示例显示了如何为数据源添加标头,但问题是寻找 GLOBAL 标头,而不是单个数据源上的标头。

标签: javascript jquery html twitter-bootstrap typeahead


【解决方案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;
}

希望这会有所帮助!

【讨论】:

  • .join('') 在模板设置中有什么作用。
  • 我认为它将所有“'

    {{Name}}

    '”连接在一起形成一个没有空格或任何内容的结果。请注意,这是插件的旧版本,我认为它从那时起发生了变化。
猜你喜欢
  • 2014-12-11
  • 2017-12-07
  • 1970-01-01
  • 2014-05-28
  • 1970-01-01
  • 1970-01-01
  • 2017-07-25
  • 1970-01-01
  • 2018-04-28
相关资源
最近更新 更多