<link rel="stylesheet" type="text/css" href="css/jquery.typeahead.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.typeahead.min.js"></script>

<form>
    <div class="typeahead__container">
        <div class="typeahead__field">
   
            <span class="typeahead__query">
                <input class="js-typeahead"
                       name="q"
                       type="search"
                       autocomplete="off">
            </span>
            <span class="typeahead__button">
                <button type="submit">
                    <span class="typeahead__search-icon"></span>
                </button>
            </span>
   
        </div>
    </div>
</form>

$.typeahead({
    input: ".js-typeahead",
    order: "asc",
    source: {
        groupName: {
            // Ajax Request
            ajax: {
                url: "..."
            }
        }
    },
    callback: {
        onClickBefore: function () { ... }
    }
});

$('.js-typeahead').typeahead({
    order: "asc",
    source: {
        groupName: {
            // Array of Objects / Strings
            data: [ {...}, {...} ]
        }
    },
    callback: {
        onInit: function () { ... }
    }
});