Add an instant search (via AJAX)

app/Resources/translations/messages.en.xlf

@@ -288,6 +288,10 @@
                 <source>post.deleted_successfully</source>
                 <target>Post deleted successfully!</target>
             </trans-unit>
+            <trans-unit id="post.search_for">
+                <source>post.search_for</source>
+                <target>Search for...</target>
+            </trans-unit>
 
             <trans-unit id="notification.comment_created">
                 <source>notification.comment_created</source>

app/Resources/translations/messages.ru.xlf

@@ -288,6 +288,10 @@
                 <source>post.deleted_successfully</source>
                 <target>Запись успешно удалена!</target>
             </trans-unit>
+            <trans-unit id="post.search_for">
+                <source>post.search_for</source>
+                <target>Искать запись...</target>
+            </trans-unit>
 
             <trans-unit id="notification.comment_created">
                 <source>notification.comment_created</source>

app/Resources/views/base.html.twig

@@ -23,7 +23,7 @@
             <header>
                 <div class="navbar navbar-default navbar-static-top" role="navigation">
                     <div class="container">
-                        <div class="navbar-header">
+                        <div class="navbar-header col-md-3 col-lg-2">
                             <a class="navbar-brand" href="{{ path('homepage') }}">
                                 Symfony Demo
                             </a>
@@ -37,6 +37,13 @@
                                 <span class="icon-bar"></span>
                             </button>
                         </div>
+                        <div class="search-bar col-sm-5">
+                            <form action="{{ path('blog_search') }}" method="get">
+                                <div class="input-group-sm">
+                                    <input name="q" type="text" class="form-control" placeholder="{{ 'post.search_for'|trans }}" autocomplete="off">
+                                </div>
+                            </form>
+                        </div>
                         <div class="navbar-collapse collapse">
                             <ul class="nav navbar-nav navbar-right">
 
@@ -135,6 +142,15 @@
             <script src="{{ asset('build/manifest.js') }}"></script>
             <script src="{{ asset('build/js/common.js') }}"></script>
             <script src="{{ asset('build/js/app.js') }}"></script>
+            <script>
+                (function($) {
+                    $(function() {
+                        $('.search-bar input[name="q"]').instantSearch({
+                            noItemsFoundMessage: '{{ 'post.no_posts_found'|trans }}'
+                        });
+                    });
+                })(window.jQuery);
+            </script>
         {% endblock %}
 
         {# it's not mandatory to set the timezone in localizeddate(). This is done to

assets/js/app.js

@@ -1,7 +1,13 @@
+// Exposes jQuery as a global variable
+global.$ = global.jQuery = require('jquery');
+
 // loads the Bootstrap jQuery plugins
 import 'bootstrap-sass/assets/javascripts/bootstrap/dropdown.js';
 import 'bootstrap-sass/assets/javascripts/bootstrap/modal.js';
 import 'bootstrap-sass/assets/javascripts/bootstrap/transition.js';
 
 // loads the code syntax highlighting library
 import './highlight.js';
+
+// loads the instant search library
+import './jquery.instantSearch.js';

assets/js/jquery.instantSearch.js

@@ -0,0 +1,100 @@
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+/**
+ * jQuery plugin for an instant searching.
+ *
+ * @author Oleg Voronkovich <[email protected]>
+ */
+(function($) {
+    $.fn.instantSearch = function(config) {
+        return this.each(function() {
+            initInstantSearch(this, $.extend(true, defaultConfig, config || {}));
+        });
+    };
+
+    var defaultConfig = {
+        minQueryLength: 2,
+        maxPreviewItems: 10,
+        previewDelay: 500,
+        noItemsFoundMessage: 'No items found'
+    };
+
+    function debounce(fn, delay) {
+        var timer = null;
+        return function () {
+            var context = this, args = arguments;
+            clearTimeout(timer);
+            timer = setTimeout(function () {
+                fn.apply(context, args);
+            }, 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);
+            });
+        }
+
+        var addItemToPreview = function(item) {
+            var $link = $('<a>').attr('href', item.url).text(item.result);
+            var $li = $('<li class="list-group-item">').append($link);
+
+            $preview.append($li);
+        }
+
+        var noItemsFound = function() {
+            var $li = $('<li class="list-group-item">').text(config.noItemsFoundMessage);
+
+            $preview.empty();
+            $preview.append($li);
+        }
+
+        var updatePreview = function() {
+            var query = $.trim($input.val()).replace(/\s{2,}/g, ' ');
+
+            if (query.length < config.minQueryLength) {
+                $preview.empty();
+                return;
+            }
+
+            $.getJSON($form.attr('action') + '?' + $form.serialize(), function(items) {
+                if (items.length === 0) {
+                    noItemsFound();
+                    return;
+                }
+
+                setPreviewItems(items);
+            });
+        }
+
+        $input.focusout(function(e) {
+            $preview.fadeOut();
+        });
+
+        $input.focusin(function(e) {
+            $preview.fadeIn();
+            updatePreview();
+        });
+
+        $input.keyup(debounce(updatePreview, config.previewDelay));
+    }
+})(window.jQuery);

assets/scss/app.scss

@@ -67,6 +67,20 @@ header .locales a {
   padding-right: 10px
 }
 
+header .search-bar {
+    padding: 0.8em 0;
+}
+
+header .search-bar form {
+    position: relative;
+}
+
+header .search-preview {
+    position: absolute;
+    width: 100%;
+    top: 100%;
+}
+
 .body-container {
   flex: 1;
   /* needed to prevent pages with a very small height and browsers not supporting flex */

src/AppBundle/Controller/BlogController.php

@@ -23,6 +23,7 @@
 use Symfony\Bundle\FrameworkBundle\Controller\Controller;
 use Symfony\Component\EventDispatcher\EventDispatcherInterface;
 use Symfony\Component\EventDispatcher\GenericEvent;
+use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
 
@@ -150,4 +151,42 @@ public function commentFormAction(Post $post)
             'form' => $form->createView(),
         ]);
     }
+
+    /**
+     * @Route("/search", name="blog_search")
+     * @Method("GET")
+     *
+     * @return JsonResponse
+     */
+    public function searchAction(Request $request)
+    {
+        $query = $request->query->get('q', '');
+
+        // Sanitizing the query: removes all non-alphanumeric characters except whitespaces
+        $query = preg_replace('/[^[:alnum:] ]/', '', trim(preg_replace('/[[:space:]]+/', ' ', $query)));
+
+        // Splits the query into terms and removes all terms which
+        // length is less than 2
+        $terms = array_unique(explode(' ', mb_strtolower($query)));
+        $terms = array_filter($terms, function ($term) {
+            return 2 <= mb_strlen($term);
+        });
+
+        $posts = [];
+
+        if (!empty($terms)) {
+            $posts = $this->getDoctrine()->getRepository(Post::class)->findByTerms($terms);
+        }
+
+        $results = [];
+
+        foreach ($posts as $post) {
+            array_push($results, [
+                'result' => htmlspecialchars($post->getTitle()),
+                'url' => $this->generateUrl('blog_post', ['slug' => $post->getSlug()]),
+            ]);
+        }
+
+        return new JsonResponse($results);
+    }
 }

src/AppBundle/Repository/PostRepository.php

@@ -59,4 +59,22 @@ private function createPaginator(Query $query, $page)
 
         return $paginator;
     }
+
+    public function findByTerms(array $terms, $limit = Post::NUM_ITEMS)
+    {
+        $queryBuilder = $this->createQueryBuilder('p');
+
+        foreach ($terms as $key => $term) {
+            $queryBuilder
+                ->orWhere('p.title LIKE :t_'.$key)
+                ->setParameter('t_'.$key, '%'.$term.'%')
+            ;
+        }
+
+        return $queryBuilder
+            ->orderBy('p.publishedAt', 'DESC')
+            ->setMaxResults($limit)
+            ->getQuery()
+            ->getResult();
+    }
 }