search.html

---
layout: page
title: "Search"
excerpt: Search Cerb documentation, guides, packages, tips, blog posts, and more.
permalink: /search/
social_image_url: /assets/images/search/search.png
jumbotron:
  title: Search
  tagline: Search Cerb documentation, guides, packages, tips, blog posts, and more.
search_index:
  exclude: true
---

<div id="search" class="search" style="min-height:500px;">
    <form action="#" method="GET" onsubmit="return false;">
        <div>
            <input id="search-box" type="text" name="q" value="" style="outline:none;-webkit-appearance:none;appearance:none;border:1px solid rgb(200,200,200);width:97%;padding:5px;font-size:2em;" placeholder="Describe what you're searching for and press <ENTER>" autofocus="autofocus" spellcheck="false">
        </div>
        <div id="search-filters">
            <label><input type="checkbox" name="tags" value="docs"> docs</label>
            <label><input type="checkbox" name="tags" value="guides"> guides</label>
            <label><input type="checkbox" name="tags" value="docs-records-types"> record types</label>
            <label><input type="checkbox" name="tags" value="releases"> releases</label>
            <label><input type="checkbox" name="tags" value="solutions"> solutions</label>
            <label><input type="checkbox" name="tags" value="tips"> tips</label>
            <label><input type="checkbox" name="tags" value="workflows"> workflows</label>
        </div>
    </form>

    <div class="search-stats" style="color:rgb(150,150,150);font-size:0.9em;"></div>
    <div id="search-results" class="search-results" style="margin-top:20px;"></div>
</div>

<script type="text/javascript">
    (function() {
        let searchBox = document.getElementById('search-box');
        let searchFilters = document.getElementById('search-filters');
        let searchResults = document.getElementById('search-results');
        let searchTerm = getQueryVariable('q');

        if (searchTerm) {
            searchBox.setAttribute("value", searchTerm);
        }

        function searchQuery() {
            if(0 === searchBox.value.length) {
                searchResults.innerText = '';
                return;
            }

            let xhr = new XMLHttpRequest();
            xhr.open("POST", "{{ site.search_endpoint_url }}?v={{ site.version }}", true);
            xhr.responseType = "json";

            xhr.onload = function () {
                if (
                    xhr.status === 200
                    && 'object' == typeof xhr.response
                    && xhr.response.hasOwnProperty('results')
                ) {
                    displaySearchResults(xhr.response.results)
                } else {
                    searchResults.innerText = 'Failed to load the search results. Please try again. (' + xhr.status + ')';
                }
            };

            xhr.onerror = function () {
                searchResults.innerText = 'Failed to load the search results. Please try again. (' + xhr.status + ')';
            };

            let formData = new FormData();
            formData.append('query', searchBox.value);
            formData.append('limit', '25');

            let filterTags = searchFilters.querySelectorAll('input[name=tags]:checked');

            if(filterTags.length > 0) {
                for (let i = 0; i < filterTags.length; i++) {
                    formData.append('tags', filterTags[i].value);
                }
            }

            xhr.send(formData);
        }

        function displaySearchResults(results) {
            if (results.length) { // Are there any results?
                searchResults.innerHTML = '';

                for (let i = 0; i < results.length; i++) {  // Iterate over the results
                    let doc = results[i];

                    let title_href = document.createElement('a');
                    title_href.setAttribute('href', doc.url);
                    title_href.style['font-size'] = '1.1em';
                    title_href.innerText = doc.title;

                    let title = document.createElement('div');
                    title.appendChild(title_href);
                    searchResults.appendChild(title);

                    let url_href = document.createElement('a');
                    url_href.setAttribute('href', doc.url);
                    url_href.style['font-size'] = '0.8em';
                    url_href.style['color'] = 'rgb(120,120,120)';
                    url_href.innerText = doc.url;

                    let url = document.createElement('div');
                    url.appendChild(url_href);
                    searchResults.appendChild(url);

                    let content = document.createElement('div');
                    content.style['margin'] = '0 0 1em 0';
                    content.innerText = doc.content;
                    searchResults.appendChild(content);

                    //let tags = document.createElement('div');
                    //tags.style['margin'] = '0 0 1em 0';
                    //tags.innerText = JSON.stringify(doc.tags);
                    //searchResults.appendChild(tags);
                }

            } else {
                searchResults.innerHTML = '<p>No results found</p>';
            }
        }

        function getQueryVariable(variable) {
            let query = window.location.search.substring(1);
            let vars = query.split('&');

            for (let i = 0; i < vars.length; i++) {
                let pair = vars[i].split('=');

                if (pair[0] === variable) {
                    return decodeURIComponent(pair[1].replace(/\+/g, '%20'));
                }
            }
        }

        searchBox.addEventListener('search', function(e) {
            e.stopPropagation();
            searchResults.innerText = 'Searching...';
            try {
                searchQuery();
            } catch(ex) {
                searchResults.innerText = 'An error occurred. Please try again.';
                console.error(ex);
            }
        });

        searchBox.addEventListener('keyup', function(e) {
            e.stopPropagation();

            if('Enter' !== e.code) return;

            searchBox.dispatchEvent(new CustomEvent('search'));
        });

        if (searchTerm) {
            searchBox.dispatchEvent(new CustomEvent('search'));
        }
    })();
</script>