JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/bloodhound.js"></script>
<form action="" method="GET">
    <input type="text" name="clients" id="clients" placeholder="Sök här.." />
</form>

CSS

input[type="text"] {
    padding: 10px 20px;
    border: 1px solid #ccc;
    width: 250px;
    height: 18px;
    color: #969696;
    margin: 0 50px;
}
input[type="text"]:focus {
    outline: none;
    border: 1px solid #ADADAD;
    color: #696969;
}
.tt-input:focus {
    outline: none;
}
.tt-menu {
    background-color: #ffffff;
    width: calc(100% - 122px);
    border: 1px solid #ADADAD;
    border-top: 0;
    padding: 5px 10px;
    left: 50px !important;
}
.tt-suggestion:last-child {
    border-bottom: 0;
}
.tt-suggestion {
    padding: 5px 10px;
    margin: 0 0 3px 0;
    border-bottom: 1px solid #E4E4E4;
}
div.search_header {
    font-size: 10pt;
    font-weight: 700;
    padding: 5px 10px;
    color: #3F3F3F;
}
div.search_header span {
    color: #9B9B9B;
    font-weight: 600;
    font-size: 8pt;
    margin: 0 0 5px 0;
}

JavaScript

Handlebars.registerHelper('ifCond', function (v1, operator, v2, options) {

    switch (operator) {
        case '==':
            return (v1 == v2) ? options.fn(this) : options.inverse(this);
        case '===':
            return (v1 === v2) ? options.fn(this) : options.inverse(this);
        case '<':
            return (v1 < v2) ? options.fn(this) : options.inverse(this);
        case '<=':
            return (v1 <= v2) ? options.fn(this) : options.inverse(this);
        case '>':
            return (v1 > v2) ? options.fn(this) : options.inverse(this);
        case '>=':
            return (v1 >= v2) ? options.fn(this) : options.inverse(this);
        case '&&':
            return (v1 && v2) ? options.fn(this) : options.inverse(this);
        case '||':
            return (v1 || v2) ? options.fn(this) : options.inverse(this);
        default:
            return options.inverse(this);
    }
});

Handlebars.registerHelper("counter", function (index) {
    return index + 1;
});

var clients = ["Aptum AB"];

var contacts = ["Aptum AB"];

var tasks = ["Aptum AB"];

var clients_bh = new Bloodhound({
    local: clients,
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace
});

var contacts_bh = new Bloodhound({
    local: contacts,
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace
});

var tasks_bh = new Bloodhound({
    local: tasks,
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace
});

clients_bh.initialize();
contacts_bh.initialize();
tasks_bh.initialize();

$("#clients").typeahead({
    hint: true,
    minLength: 1
}, {
    name: 'clients',
    displayKey: 'client_name',
    source: clients_bh.ttAdapter(),
    templates: {
        header: Handlebars.compile('<div class="search_header">Kundkort <span>(<span class="test">{{#each client_name}} {{counter @index}} {{@index}} {{/each}}</span>)...