feature #632 Fix jQuery instantSearch plugin and search result (yceruto)

This PR was squashed before being merged into the master branch (closes #632).

Discussion
----------

Fix jQuery instantSearch plugin and search result

![search](https://user-images.githubusercontent.com/2028198/29907671-c766eaa8-8dea-11e7-97fb-78ff51a7a33e.png)

**instantSearch**
 * Refactored to some known JavaScript pattern (implemented Prototype Design Pattern)
 * Allow override options through input attributes `data-*` and added support to text translation ("No results found")
 * Add article template prototype and render method (improved visibility)
 * Sent configured limit of items to search controller (this allows to configure more than 10 items as results from plugin)
 * Simplify properties and methods (improved visibility)

**Search result**
 * Removed old effect of hide/show results on focus out/in of the input
 * Show publishedDate and author for each article found
 * Sync style with blog index page and some margin adjustments

**Minor unrelated changes**
 * Fix @return type-hints for `PostRepository::findBySearchQuery()` method (better autocomplete)
 * Show logout link as last link always

Commits
-------

ea96338 Fix jQuery instantSearch plugin and search result

Author: javiereguiluz

assets/js/jquery.instantSearch.js

@@ -2,92 +2,105 @@
  * jQuery plugin for an instant searching.
  *
  * @author Oleg Voronkovich <[email protected]>
+ * @author Yonel Ceruto <[email protected]>
  */
-(function($) {
-    $.fn.instantSearch = function(config) {
-        return this.each(function() {
-            initInstantSearch(this, $.extend(true, defaultConfig, config || {}));
-        });
+(function ($) {
+    'use strict';
+
+    String.prototype.render = function (parameters) {
+        return this.replace(/({{ (\w+) }})/g, function (match, pattern, name) {
+            return parameters[name];
+        })
     };
 
-    var defaultConfig = {
+    // INSTANTS SEARCH PUBLIC CLASS DEFINITION
+    // =======================================
+
+    var InstantSearch = function (element, options) {
+        this.$input = $(element);
+        this.$form = this.$input.closest('form');
+        this.$preview = $('<ul class="search-preview list-group">').appendTo(this.$form);
+        this.options = $.extend({}, InstantSearch.DEFAULTS, this.$input.data(), options);
+
+        this.$input.keyup(this.debounce());
+    };
+
+    InstantSearch.DEFAULTS = {
         minQueryLength: 2,
-        maxPreviewItems: 10,
-        previewDelay: 500,
-        noItemsFoundMessage: 'No results found.'
+        limit: 10,
+        delay: 500,
+        noResultsMessage: 'No results found',
+        itemTemplate: '\
+                <article class="post">\
+                    <h2><a href="{{ url }}">{{ title }}</a></h2>\
+                    <p class="post-metadata">\
+                       <span class="metadata"><i class="fa fa-calendar"></i> {{ date }}</span>\
+                       <span class="metadata"><i class="fa fa-user"></i> {{ author }}</span>\
+                    </p>\
+                    <p>{{ summary }}</p>\
+                </article>'
     };
 
-    function debounce(fn, delay) {
+    InstantSearch.prototype.debounce = function () {
+        var delay = this.options.delay;
+        var search = this.search;
         var timer = null;
+        var self = this;
+
         return function () {
-            var context = this, args = arguments;
             clearTimeout(timer);
             timer = setTimeout(function () {
-                fn.apply(context, args);
+                search.apply(self);
             }, delay);
         };
-    }
-
-    var initInstantSearch = function(el, config) {
-        var $input = $(el);
-        var $form = $input.closest('form');
-        var $preview = $('<ul class="search-preview list-group">').appendTo($form);
-
-        var setPreviewItems = function(items) {
-            $preview.empty();
-
-            $.each(items, function(index, item) {
-                if (index > config.maxPreviewItems) {
-                    return;
-                }
+    };
 
-                addItemToPreview(item);
-            });
+    InstantSearch.prototype.search = function () {
+        var query = $.trim(this.$input.val()).replace(/\s{2,}/g, ' ');
+        if (query.length < this.options.minQueryLength) {
+            this.$preview.empty();
+            return;
         }
 
-        var addItemToPreview = function(item) {
-            var $link = $('<a>').attr('href', item.url).text(item.title);
-            var $title = $('<h3>').attr('class', 'm-b-0').append($link);
-            var $summary = $('<p>').text(item.summary);
-            var $result = $('<div>').append($title).append($summary);
+        var self = this;
+        var data = this.$form.serializeArray();
+        data['l'] = this.limit;
 
-            $preview.append($result);
-        }
+        $.getJSON(this.$form.attr('action'), data, function (items) {
+            self.show(items);
+        });
+    };
 
-        var noItemsFound = function() {
-            var $result = $('<div>').text(config.noItemsFoundMessage);
+    InstantSearch.prototype.show = function (items) {
+        var $preview = this.$preview;
+        var itemTemplate = this.options.itemTemplate;
 
+        if (0 === items.length) {
+            $preview.html(this.options.noResultsMessage);
+        } else {
             $preview.empty();
-            $preview.append($result);
+            $.each(items, function (index, item) {
+                $preview.append(itemTemplate.render(item));
+            });
         }
+    };
 
-        var updatePreview = function() {
-            var query = $.trim($input.val()).replace(/\s{2,}/g, ' ');
+    // INSTANTS SEARCH PLUGIN DEFINITION
+    // =================================
 
-            if (query.length < config.minQueryLength) {
-                $preview.empty();
-                return;
-            }
+    function Plugin(option) {
+        return this.each(function () {
+            var $this = $(this);
+            var instance = $this.data('instantSearch');
+            var options = typeof option === 'object' && option;
 
-            $.getJSON($form.attr('action') + '?' + $form.serialize(), function(items) {
-                if (items.length === 0) {
-                    noItemsFound();
-                    return;
-                }
+            if (!instance) $this.data('instantSearch', (instance = new InstantSearch(this, options)));
 
-                setPreviewItems(items);
-            });
-        }
-
-        $input.focusout(function(e) {
-            $preview.fadeOut();
-        });
+            if (option === 'search') instance.search();
+        })
+    }
 
-        $input.focusin(function(e) {
-            $preview.fadeIn();
-            updatePreview();
-        });
+    $.fn.instantSearch = Plugin;
+    $.fn.instantSearch.Constructor = InstantSearch;
 
-        $input.keyup(debounce(updatePreview, config.previewDelay));
-    }
 })(window.jQuery);

assets/js/search.js

@@ -2,6 +2,6 @@ import './jquery.instantSearch.js';
 
 $(function() {
     $('.search-field').instantSearch({
-        previewDelay: 100,
+        delay: 100,
     });
 });

assets/scss/app.scss

@@ -308,3 +308,23 @@ body#comment_form_error h1.text-danger {
     width: 98%;
   }
 }
+
+/* Page: 'Blog search'
+   ------------------------------------------------------------------------- */
+body#blog_search #main h1,
+body#blog_search #main p {
+  margin-bottom: 0.5em
+}
+
+body#blog_search article.post:first-child {
+  margin-top: 2em;
+}
+
+body#blog_search article.post {
+  margin-bottom: 2em;
+}
+
+body#blog_search .post-metadata {
+  font-size: 16px;
+  margin-bottom: 8px;
+}