输入菜单中的分隔符?

时间:2016-08-23 05:48:17

标签: typeahead.js

我不确定我们是否已经有办法使用单个数据源在预先输入菜单中显示seprator。我尝试了多种组合,尝试寻找解决方案,但无法获得任何解决方案。

更像是在下面的屏幕截图中,我将这些数据来自单一来源:

['US: channel1', 'US: channel2', 'US: channel3', 'US: channel4', 'US: channel5', 'CA: channel1', 'CA: channel2']

在上面的数据中,我想在基于美国的频道之后显示分隔符,然后显示CA频道选项。

enter image description here

如果需要显示分隔符,我可以将数据源更新为多维数组或任何其他自定义。或者,在typeaheadjs范围之外的任何其他方式。

请帮我找一个有效的解决方案。

1 个答案:

答案 0 :(得分:1)

我想,我将回答我的问题。这是怎么回事。

我插入了一个空白值,该值将被替换为分隔符。

['US: channel1', 'US: channel2', 'US: channel3', 'US: channel4', 'US: channel5', '', 'CA: channel1', 'CA: channel2']

要插入空白数据,我们可能必须使用单数据源的多维数组。

并且,使用typeaheadjs的typeahead:render事件,我必须处理如下所示:

 $(input).bind('typeahead:render', function (e) {
     var currentInput = $(e.target),
         options;

    options = $(currentInput).closest('.column-filter').find('.tt-suggestion');
    $(options).each(function (index, element) {
        if (!$(element).text().trim().length) {
            $(element).replaceWith('<hr>');
        }
    });
});

jsfiddle link有一个工作示例。