Better way to add website search engine for Jekyll-based website

This post illustrates how to use Simple-Jekyll-Search to build the search page in a personal website. This approach is motivated by Kev Quirk's post.

I amend the procedures to make it more simple. ## 1. First step Create a file search.json in the root directory with the code in the file.

---
layout: none
---
[
{% for post in site.posts %}
{
"title"    : "{{ post.title | escape }}",
"category" : "{{ post.category }}",
"tags"     : "{{ post.tags | join: ', ' }}",
"url"      : "{{ site.baseurl }}{{ post.url }}",
"date"     : "{{ post.date }}"
} {% unless forloop.last %},{% endunless %}
{% endfor %}
]

2. Second step

Create a search-script.js file in the /assets/js/ directory.

Click to expand

/*!
* Simple-Jekyll-Search
* Copyright 2015-2020, Christian Fei
* Licensed under the MIT License.
  */
!(function () {
    "use strict";
    var f = {
        compile: function (r) {
            return i.template.replace(i.pattern, function (t, e) {
                var n = i.middleware(e, r[e], i.template);
                return void 0 !== n ? n : r[e] || t;
            });
        },
        setOptions: function (t) {
            (i.pattern = t.pattern || i.pattern),
                (i.template = t.template || i.template),
            "function" == typeof t.middleware && (i.middleware = t.middleware);
        },
    };
    const i = { pattern: /\{(.*?)\}/g, template: "", middleware: function () { } };
    var n = function (t, e) {
            var n = e.length,
                r = t.length;
            if (n < r) return !1;
            if (r === n) return t === e;
            t: for (var i = 0, o = 0; i < r; i++) {
                for (var u = t.charCodeAt(i); o < n;)
                    if (e.charCodeAt(o++) === u) continue t;
                return !1;
            }
            return !0;
        },
        e = new (function () {
            this.matches = function (t, e) {
                return n(e.toLowerCase(), t.toLowerCase());
            };
        })(),
        r = new (function () {
            this.matches = function (e, t) {
                return (
                    !!e &&
                    ((e = e.trim().toLowerCase()),
                    (t = t.trim().toLowerCase()).split(" ").filter(function (t) {
                        return 0 <= e.indexOf(t);
                    }).length === t.split(" ").length)
                );
            };
        })(),
        d = {
            put: function (t) {
                if (l(t)) return a(t);
                if (
                    (function (t) {
                        return (
                            Boolean(t) &&
                            "[object Array]" === Object.prototype.toString.call(t)
                        );
                    })(t)
                )
                    return (function (n) {
                        const r = [];
                        s();
                        for (let t = 0, e = n.length; t < e; t++)
                            l(n[t]) && r.push(a(n[t]));
                        return r;
                    })(t);
                return undefined;
            },
            clear: s,
            search: function (t) {
                return t
                    ? (function (e, n, r, i) {
                        const o = [];
                        for (let t = 0; t < e.length && o.length < i.limit; t++) {
                            var u = (function (t, e, n, r) {
                                for (const i in t)
                                    if (
                                        !(function (n, r) {
                                            for (let t = 0, e = r.length; t < e; t++) {
                                                var i = r[t];
                                                if (new RegExp(i).test(n)) return !0;
                                            }
                                            return !1;
                                        })(t[i], r.exclude) &&
                                        n.matches(t[i], e)
                                    )
                                        return t;
                            })(e[t], n, r, i);
                            u && o.push(u);
                        }
                        return o;
                    })(u, t, c.searchStrategy, c).sort(c.sort)
                    : [];
            },
            setOptions: function (t) {
                (c = t || {}),
                    (c.fuzzy = t.fuzzy || !1),
                    (c.limit = t.limit || 10),
                    (c.searchStrategy = t.fuzzy ? e : r),
                    (c.sort = t.sort || o),
                    (c.exclude = t.exclude || []);
            },
        };
    function o() {
        return 0;
    }
    const u = [];
    let c = {};
    function s() {
        return (u.length = 0), u;
    }
    function l(t) {
        return (
            Boolean(t) && "[object Object]" === Object.prototype.toString.call(t)
        );
    }
    function a(t) {
        return u.push(t), u;
    }
    (c.fuzzy = !1),
        (c.limit = 10),
        (c.searchStrategy = c.fuzzy ? e : r),
        (c.sort = o),
        (c.exclude = []);
    var p = {
        load: function (t, e) {
            const n = window.XMLHttpRequest
                ? new window.XMLHttpRequest()
                : new ActiveXObject("Microsoft.XMLHTTP");
            n.open("GET", t, !0), (n.onreadystatechange = h(n, e)), n.send();
        },
    };
    function h(e, n) {
        return function () {
            if (4 === e.readyState && 200 === e.status)
                try {
                    n(null, JSON.parse(e.responseText));
                } catch (t) {
                    n(t, null);
                }
        };
    }
    var m = function y(t) {
            if (
                !(e = t) ||
                !("undefined" != typeof e.required && e.required instanceof Array)
            )
                throw new Error("-- OptionsValidator: required options missing");
            var e;
            if (!(this instanceof y)) return new y(t);
            const r = t.required;
            (this.getRequiredOptions = function () {
                return r;
            }),
                (this.validate = function (e) {
                    const n = [];
                    return (
                        r.forEach(function (t) {
                            "undefined" == typeof e[t] && n.push(t);
                        }),
                            n
                    );
                });
        },
        w = {
            merge: function (t, e) {
                const n = {};
                for (const r in t)
                    (n[r] = t[r]), "undefined" != typeof e[r] && (n[r] = e[r]);
                return n;
            },
            isJSON: function (t) {
                try {
                    return t instanceof Object && JSON.parse(JSON.stringify(t)) ? !0 : !1;
                } catch (e) {
                    return !1;
                }
            },
        };
    !(function (t) {
        let i = {
                searchInput: null,
                resultsContainer: null,
                json: [],
                success: Function.prototype,
                searchResultTemplate:
                    '<li><a href="{url}" title="{desc}">{title}</a></li>',
                templateMiddleware: Function.prototype,
                sortMiddleware: function () {
                    return 0;
                },
                noResultsText: "No results found",
                limit: 10,
                fuzzy: !1,
                debounceTime: null,
                exclude: [],
            },
            n;
        const e = function (t, e) {
            e ? (clearTimeout(n), (n = setTimeout(t, e))) : t.call();
        };
        var r = ["searchInput", "resultsContainer", "json"];
        const o = m({ required: r });
        function u(t) {
            d.put(t),
                i.searchInput.addEventListener("input", function (t) {
                    -1 === [13, 16, 20, 37, 38, 39, 40, 91].indexOf(t.which) &&
                    (c(),
                        e(function () {
                            l(t.target.value);
                        }, i.debounceTime));
                });
        }
        function c() {
            i.resultsContainer.innerHTML = "";
        }
        function s(t) {
            i.resultsContainer.innerHTML += t;
        }
        function l(t) {
            var e;
            (e = t) &&
            0 < e.length &&
            (c(),
                (function (e, n) {
                    var r = e.length;
                    if (0 === r) return s(i.noResultsText);
                    for (let t = 0; t < r; t++) (e[t].query = n), s(f.compile(e[t]));
                })(d.search(t), t));
        }
        function a(t) {
            throw new Error("SimpleJekyllSearch --- " + t);
        }
        t.SimpleJekyllSearch = function (t) {
            var n;
            0 < o.validate(t).length &&
            a("You must specify the following required options: " + r),
                (i = w.merge(i, t)),
                f.setOptions({
                    template: i.searchResultTemplate,
                    middleware: i.templateMiddleware,
                }),
                d.setOptions({
                    fuzzy: i.fuzzy,
                    limit: i.limit,
                    sort: i.sortMiddleware,
                    exclude: i.exclude,
                }),
                w.isJSON(i.json)
                    ? u(i.json)
                    : ((n = i.json),
                        p.load(n, function (t, e) {
                            t && a("failed to get JSON (" + n + ")"), u(e);
                        }));
            t = { search: l };
            return "function" == typeof i.success && i.success.call(t), t;
        };
    })(window);
})();

3. Third step

Create a new file /_pages/search.md for search page display with a personalised style and paste the following code:

Click to expand

---
layout: page
title: Search
permalink: /search/
nav: true
nav_order: 3
---

<style>
input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
.search-container {
  border-radius: 5px;
  padding: 20px;
}
</style>

<!-- HTML search field -->
<div class="search-container">
    <input type="text" id="search-input" placeholder="Type your search here..." autofocus>
    <ul id="results-container"></ul>
</div>

<!-- Grab search-script.js -->
<script src="/assets/js/search-script.js" type="text/javascript"></script>

<!-- Configuration -->
<script>
    SimpleJekyllSearch({
        searchInput: document.getElementById('search-input'),
        resultsContainer: document.getElementById('results-container'),
        json: '/search.json',
        })
</script>