<div id="search">
    <label>
        <span class="search-icon">🔎</span>
        <input autocomplete="off" id="search-input" oninput="changeResultContainerDisp(this.value)" placeholder="Search all articles..." type="text"/>
    </label>

    <ul id="results-container" style="display: none"></ul>
</div>
<script src="/assets/js/simple-jekyll-search.js"></script>
<script>
    function changeResultContainerDisp(val) {
        if (val) {
            document
                .getElementById("results-container")
                .style
                .display = "block";
            document.getElementById("search-input").addEventListener("blur", function () {
                document.addEventListener("click", function (event) {
                    var isClickInside = document.getElementById("results-container").contains(event.target);
                    if (! isClickInside) {
                        document
                            .getElementById("results-container")
                            .style
                            .display = "none";
                    }
                })
            })
        } else {
            document
                .getElementById("results-container")
                .style
                .display = "none";
        }
    }
    var sjs = SimpleJekyllSearch({
        searchInput: document.getElementById("search-input"),
        resultsContainer: document.getElementById("results-container"),
        json: "/search.json",
        searchResultTemplate: "<li class='search_res' style='list-style: none;'><a href='{{ site.url }}{url}' color: #555555;'><p><strong>></strong> {title}</p></a></li>",
        noResultsText: "No results found. Try another search.",
        fuzzy: false,
        limit: 5
    })
</script>