Instant Search Suggestions

add_action( 'wp_footer', function () {
    ?>
    <style>
        .wpide-live-results{position:absolute;z-index:999;left:0;right:0;top:100%;margin:4px 0 0;padding:4px 0;list-style:none;background:#fff;color:#1d2327;border:1px solid rgba(0,0,0,.15);border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.12);}
        .wpide-live-results a{display:block;padding:.45em .9em;color:inherit;text-decoration:none;}
        .wpide-live-results a:hover,.wpide-live-results a:focus{background:#f0f6fc;}
    </style>
    <script>
        (function () {
            var endpoint = <?php echo wp_json_encode( esc_url_raw( rest_url( 'wp/v2/search' ) ) ); ?>;

            function decode(text) {
                var area = document.createElement('textarea');
                area.innerHTML = text;
                return area.value;
            }

            document.querySelectorAll('form input[name="s"]').forEach(function (input) {
                var form = input.form;
                var box = document.createElement('ul');
                var timer;
                var controller;

                box.className = 'wpide-live-results';
                box.hidden = true;

                if (getComputedStyle(form).position === 'static') {
                    form.style.position = 'relative';
                }

                form.appendChild(box);
                input.setAttribute('autocomplete', 'off');

                input.addEventListener('input', function () {
                    var term = input.value.trim();

                    clearTimeout(timer);

                    if (term.length < 3) {
                        box.hidden = true;
                        return;
                    }

                    timer = setTimeout(function () {
                        if (controller) {
                            controller.abort();
                        }

                        controller = new AbortController();

                        fetch(endpoint + (endpoint.indexOf('?') === -1 ? '?' : '&') + 'per_page=6&search=' + encodeURIComponent(term), { signal: controller.signal })
                            .then(function (response) {
                                return response.json();
                            })
                            .then(function (items) {
                                box.innerHTML = '';

                                if (!Array.isArray(items) || !items.length) {
                                    box.hidden = true;
                                    return;
                                }

                                items.forEach(function (item) {
                                    var li = document.createElement('li');
                                    var link = document.createElement('a');
                                    link.href = item.url;
                                    link.textContent = decode(item.title);
                                    li.appendChild(link);
                                    box.appendChild(li);
                                });

                                box.hidden = false;
                            })
                            .catch(function () {});
                    }, 250);
                });

                input.addEventListener('keydown', function (event) {
                    if (event.key === 'Escape') {
                        box.hidden = true;
                    }
                });

                document.addEventListener('click', function (event) {
                    if (!form.contains(event.target)) {
                        box.hidden = true;
                    }
                });
            });
        })();
    </script>
    <?php
} );