JSFiddle - React, Tailwind, and code Playground

by Kishore Polsani

HTML

<head>
    ...
    <!-- Optional CSS -->
    <link rel="stylesheet" href="/vendor/jquery-typeahead/dist/jquery.typeahead.min.css">
 
    <!-- Required JavaScript -->
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="/vendor/jquery-typeahead/dist/jquery.typeahead.min.js"></script>
    ...
</head><form id="form-french_v1" name="form-french_v1">
    <div class="typeahead__container">
        <div class="typeahead__field">
            <div class="typeahead__query">
                <input class="js-typeahead-french_v1" name="french_v1[query]" placeholder="Search" autocomplete="off">
            </div>
            <div class="typeahead__button">
                <button type="submit">
                    <i class="typeahead__search-icon"></i>
                </button>
            </div>
        </div>
    </div>
</form>

JavaScript

$.typeahead({
    input: '.js-typeahead-french_v1',
    minLength: 0,
    maxItem: 15,
    order: "asc",
    hint: true,
    accent: true,
    searchOnFocus: true,
    backdrop: {
        "background-color": "#3879d9",
        "opacity": "0.1",
        "filter": "alpha(opacity=10)"
    },
    source: {
        ab: "/jquerytypeahead/french_v1.json"
    },
    debug: true
});