_layouts/google_search.html

{% include head.html %}
<body>
{% include header_nav.html %}
<main class="main_wrapper container search-page">
    {% include left_col.html %}
    <article>
        <div class="wrapper article" id="googleSearchPage">
            <div id="content_col" class="googleSearch">
                <article>
                    <h1>Search results for: <span class="searchQuery"></span></h1>
                    <div class="resultsCount"><span></span> results</div>
                    <div id="searchResults"></div>
                </article>
                <script>
                    const version = window.location.pathname.split('/')[2];
                    const queryParams = new URLSearchParams(window.location.search);
                    const searchInput = document.getElementById('top_search');
                    const searchResults = document.getElementById('searchResults');
                    const searchFor = document.querySelector('.searchQuery');
                    const resultsCount = document.querySelector('.resultsCount span');

                    const displayResults = (results) => {
                        let html = '<ul>';
                        resultsCount.innerHTML = results.length;
                        if (results.length > 0) {
                            for (const result of results) {
                                html += `<li>
                                            ${result.breadCrumbs}<a href="${result.uri}">${result.title}</a>
                                            <div class="search-description">${result.content}</div>
                                        </li>`;
                            }
                            html += `</ul>`;
                        } else {
                            html = `No results found`;
                        }

                        searchResults.innerHTML = html;
                    }

                    const search = searchQuery =>
                        fetch(`https://${window.location.hostname}/docs/search/${version}/?searchQuery=${searchQuery}`)
                            .then(response => response.json()).then(data => displayResults(data))
                            .catch(() => searchResults.innerTextr = 'An error happened while search');

                    searchInput.oninput = searchInput.onchange = () => {
                        search(searchInput.value);
                        searchFor.innerText = searchInput.value;
                    }

                    if (queryParams.has('q')) {
                        searchInput.value = queryParams.get('q');
                        searchFor.innerText = queryParams.get('q');
                        searchInput.dispatchEvent(new Event('change'));
                    }
                </script>
            </div>
        </div>
    </article>
</main>
{% include footer.html %}
</body>
</html>