local search: download the search database (index.json) on demand

Previously the search database (index.json) was always downloaded for
every page request (or maybe less due to caching).
Now it is downloaded only after the search form field received the
"focus" event.

Benefits:

* reduce traffic (only a fraction of visitors use the local search)
* reduce computing consumption (the JSON data is not transformed into a
  lunr database)
* improve perceived speed of the website, e.g. google's "PageSpeed
  Insights" rating for https://gallery.munin-monitoring.org went up from
  60% to 92% after this change (whatever that means)

Drawbacks:
There is a small delay between the user entering the input field and
the indexing database being ready.  For all but the most rare
circumstances, the download and indexing initialization will be
finished before the user entered three letters (the default minimum
lenght for input to be handled by the autocompletion).  If the user's
input really arrived before the indexer is ready (e.g. due to pasting
input), then the user needs to add or remove another character before
the autocompletion results appear.  This is probably an acceptable and
intuitive behavior for most users.

1 files changed, 15 insertions, 6 deletions

diff --git a/static/plugins/search.js b/static/plugins/search.js
index 08afa15..80eed2a 100644
--- a/static/plugins/search.js
+++ b/static/plugins/search.js
@@ -5,7 +5,7 @@ function endsWith(str, suffix) {
 }
 
 // Initialize lunrjs using our generated index file
-function initLunr() {
+function initLunr(success_callback) {
     if (!endsWith(baseurl,"/")){
         baseurl = baseurl+'/'
     };
@@ -13,10 +13,10 @@ function initLunr() {
     // First retrieve the index file
     $.getJSON(baseurl +"index.json")
         .done(function(index) {
-            pagesIndex =   index;
+            pagesIndex = index;
             // Set up lunrjs by declaring the fields we use
             // Also provide their boost level for the ranking
-            lunrIndex = new lunr.Index
+            lunrIndex = new lunr.Index;
             lunrIndex.ref("uri");
             lunrIndex.field('title', {
                 boost: 15
@@ -33,6 +33,7 @@ function initLunr() {
                 lunrIndex.add(page);
             });
             lunrIndex.pipeline.remove(lunrIndex.stemmer)
+            success_callback();
         })
         .fail(function(jqxhr, textStatus, error) {
             var err = textStatus + ", " + error;
@@ -55,9 +56,7 @@ function search(query) {
         });
 }
 
-// Let's get started
-initLunr();
-$( document ).ready(function() {
+function configure_completion() {
     var searchList = new autoComplete({
         /* selector for the search box element */
         selector: $("#search-by").get(0),
@@ -88,4 +87,14 @@ $( document ).ready(function() {
             location.href = item.getAttribute('data-uri');
         }
     });
+};
+
+$( document ).ready(function() {
+    // configure lazy loading of the search database
+    $("#search-by").focusin(function() {
+        // download and initialize the index only once
+        if (typeof lunrIndex == 'undefined') {
+            initLunr(configure_completion);
+        }
+    });
 });