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 = [
  {
    "0": "VEzHXsF431",
    "1": "Rani",
    "2": "Gawrieh",
    "3": "1",
    "4": "Aleksandar Petrusinski",
    "contact_unique": "VEzHXsF431",
    "contact_firstname": "Rani",
    "contact_lastname": "Gawrieh",
    "client_id": "1",
    "client_name": "Aleksandar Petrusinski"
  },
  {
    "0": "WJS3lk0sfc",
    "1": "Kim",
    "2": "Lindner",
    "3": "2",
    "4": "Aptum AB",
    "contact_unique": "WJS3lk0sfc",
    "contact_firstname": "Kim",
    "contact_lastname": "Lindner",
    "client_id": "2",
    "client_name": "Aptum AB"
  },
  {
    "0": "1naqLIJkE7",
    "1": "Emil",
    "2": "Seyidov",
    "3": "3",
    "4": "Emil Cykadov",
    "contact_unique": "1naqLIJkE7",
    "contact_firstname": "Emil",
    "contact_lastname": "Seyidov",
    "client_id": "3",
    "client_name": "Emil Cykadov"
  }
];

var contacts = [
  {
    "0": "VEzHXsF431",
    "1": "Rani",
    "2": "Gawrieh",
    "3": "1",
    "4": "Aleksandar Petrusinski",
    "contact_unique": "VEzHXsF431",
   ...