<div id="searchForm">
    <label for="searchbar">Zoeken</label>
    <input type="text" class="search-field" id="searchbar">
    <div id="searchresults">

    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        var form = document.getElementById('searchForm');
        var searchBar = document.getElementById('searchbar');

        var sh = new searchHandler("{{ route('catalog.search') }}");

        searchBar.addEventListener('keydown', debounce(function() {
            var results = sh.search(searchBar.value, 1, 5);
            console.log(results);
        }, 200));
        /**
         * Returns a function, that, as long as it continues to be invoked, will not
         * be triggered. The function will be called after it stops being called for
         * N milliseconds. If `immediate` is passed, trigger the function on the
         * leading edge, instead of the trailing.
         * @param func
         * @param wait
         * @param immediate
         * @returns {Function}
         */
        function debounce(func, wait, immediate) {
            let timeout;
            return function () {
                let context = this, args = arguments;
                let later = function () {
                    timeout = null;
                    if (!immediate) func.apply(context, args);
                };
                let callNow = immediate && !timeout;
                clearTimeout(timeout);
                timeout = setTimeout(later, wait);
                if (callNow) func.apply(context, args);
            };
        };
    })
</script>