Jquery typeahead datatable_v1

by Tom Bertrand

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/running-coder/jquery-typeahead/develop/src/jquery.typeahead.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.rawgit.com/running-coder/jquery-typeahead/develop/src/jquery.typeahead.js"></script>
<table id="example" class="display" width="100%">
    <thead>
    <tr>
        <th>Name
            <div class="search-bar">
                <div class="typeahead__container">
                    <div class="typeahead__field">
                        <span class="typeahead__query">
                            <input type="text"/>
                        </span>
                    </div>
                </div>
            </div>
        </th>
        <th>Position
            <div class="search-bar">
                <div class="typeahead__container">
                    <div class="typeahead__field">
                        <span class="typeahead__query">
                            <input type="text"/>
                        </span>
                    </div>
                </div>
            </div>
        </th>
        <th>Office
            <div class="search-bar">
                <div class="typeahead__container">
                    <div class="typeahead__field">
                        <span class="typeahead__query">
                            <input type="text"/>
                        </span>
                    </div>
                </div>
            </div>
        </th>
        <th>Age
            <div class="search-bar">
                <div class="typeahead__container">
                    <div class="typeahead__field">
                        <span class="typeahead__query">
                            <input type="text"/>
                        </span>
...

JavaScript

var table = $('#example').DataTable({
    dom: 't',
    fixedHeader: {
        footer: true
    },
    paging: false
});

var aheaddata = ["Afghanistan", "Albania", "Algeria", "Andorra"];

// Apply the search
table.columns().every(function (i) {
    var that = this;

    $('input', this.footer()).on('keyup change', function () {
        if (that.search() !== this.value) {
            that.search(this.value).draw();
        }
    });

    $.typeahead({
        input: 'input:eq(' + i + ')',
        minLength: 0,
        searchOnFocus: true,
        //dropdownFilter: true,
        source: {
            data: aheaddata
        },
        debug: true
    });
});