typeahead with separator

HTML

<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
<div class="wrapper">
    <input type="text" value="" />
</div>

CSS

.tt-hint {
    color: #8a8a8a;
}

.tt-menu {
    background-color: #fff;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    color: #464646;
    max-height: 250px;
    overflow: auto;
    text-align: left;
}

.tt-menu hr {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: -moz-use-text-color -moz-use-text-color #dbdbdb;
    border-image: none;
    border-style: none none solid;
    border-width: 0 0 1px;
    height: 0;
    margin: 0;
}

.tt-menu hr:last-child {
    display: none;
}

.tt-suggestion {
    font-weight: normal;
    line-height: 18px;
    padding: 9px 43px 9px 10px;
    white-space: nowrap;
}

.tt-suggestion:hover,
.tt-suggestion.tt-cursor {
    background-color: #fafafa;
}

.tt-suggestion:hover {
    cursor: pointer;
}

.tt-suggestion p {
    margin: 0;
}

JavaScript

var myDataSource = [
    [{
        "text": "US: Channel 1",
        "value": "channel1"
    }, {
        "text": "US: Channel 2",
        "value": "channel2"
    }, {
        "text": "US: Channel 3",
        "value": "channel3"
    }, {
        "text": "US: Channel 4",
        "value": "channel4"
    }, {
        "text": "US: Channel 5",
        "value": "channel5"
    }],
    [{
        "text": "UK: Channel 1",
        "value": "channel1"
    }, {
        "text": "UK: Channel 2",
        "value": "channel2"
    }, {
        "text": "UK: Channel 3",
        "value": "channel3"
    }, {
        "text": "UK: Channel 4",
        "value": "channel4"
    }, {
        "text": "UK: Channel 5",
        "value": "channel5"
    }]
];

function substringMatcher(data) {
    return function findMatches(query, callback) {
        var matches = [],
            substrRegex = new RegExp(query, 'i');

        $.each(data, function(i, outer) {
            $.each(outer, function(j, inner) {
                if (substrRegex.test(inner.text)) {
                    matches.push(inner.text);
                }
            });
            // Pushing blank data to be replaced with a seperator.
            // Please refer: http://stackoverflow.com/q/39093255/2469928.
            matches.push('');
        });

        callback(matches);
    };
}
$('input').typeahead({
    'hint': true,
    'highlight': true,
    'minLength': 0
}, {
    'name': 'suggest',
    'source': substringMatcher(myDataSource),
    'limit': 'Infinity'
});
// Show a seperator between group of data set.
// Please refer: http://stackoverflow.com/q/39093255/2469928.
$('input').bind('typeahead:render', function(e) {
    var currentInput = $(e.target),
        options;

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