Add an instant post search

app/Resources/translations/messages.en.xlf

@@ -255,6 +255,10 @@
                 <source>menu.rss</source>
                 <target>Blog Posts RSS</target>
             </trans-unit>
+            <trans-unit id="menu.search">
+                <source>menu.search</source>
+                <target>Search</target>
+            </trans-unit>
 
             <trans-unit id="post.to_publish_a_comment">
                 <source>post.to_publish_a_comment</source>
@@ -288,6 +292,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>
@@ -64,6 +64,10 @@
                                     </li>
                                 {% endif %}
 
+                                <li>
+                                    <a href="{{ path('blog_search') }}"> <i class="fa fa-search"></i> {{ 'menu.search'|trans }}</a>
+                                </li>
+
                                 <li class="dropdown">
                                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" id="locales">
                                         <i class="fa fa-globe" aria-hidden="true"></i>

app/Resources/views/blog/search.html.twig

@@ -0,0 +1,23 @@
+{% extends 'base.html.twig' %}
+
+{% block javascripts %}
+    {{ parent() }}
+    <script src="{{ asset('build/js/search.js') }}"></script>
+{% endblock %}
+
+{% block main %}
+    <form action="{{ path('blog_search') }}" method="get">
+        <div class="form-group">
+            <input name="q" type="text" class="form-control search-field" placeholder="{{ 'post.search_for'|trans }}" autocomplete="off" autofocus>
+        </div>
+    </form>
+
+    <div id="results">
+    </div>
+{% endblock %}
+
+{% block sidebar %}
+    {{ parent() }}
+
+    {{ show_source_code(_self) }}
+{% endblock %}

assets/js/jquery.instantSearch.js

@@ -0,0 +1,93 @@
+/**
+ * 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 results 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.title);
+            var $title = $('<h3>').attr('class', 'm-b-0').append($link);
+            var $summary = $('<p>').text(item.summary);
+            var $result = $('<div>').append($title).append($summary);
+
+            $preview.append($result);
+        }
+
+        var noItemsFound = function() {
+            var $result = $('<div>').text(config.noItemsFoundMessage);
+
+            $preview.empty();
+            $preview.append($result);
+        }
+
+        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/js/search.js

@@ -0,0 +1,7 @@
+import './jquery.instantSearch.js';
+
+$(function() {
+    $('.search-field').instantSearch({
+        previewDelay: 100,
+    });
+});

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,31 @@ public function commentFormAction(Post $post)
             'form' => $form->createView(),
         ]);
     }
+
+    /**
+     * @Route("/search", name="blog_search")
+     * @Method("GET")
+     *
+     * @return Response|JsonResponse
+     */
+    public function searchAction(Request $request)
+    {
+        if (!$request->isXmlHttpRequest()) {
+            return $this->render('blog/search.html.twig');
+        }
+
+        $query = $request->query->get('q', '');
+        $posts = $this->getDoctrine()->getRepository(Post::class)->findBySearchQuery($query);
+
+        $results = [];
+        foreach ($posts as $post) {
+            $results[] = [
+                'title' => htmlspecialchars($post->getTitle()),
+                'summary' => htmlspecialchars($post->getSummary()),
+                'url' => $this->generateUrl('blog_post', ['slug' => $post->getSlug()]),
+            ];
+        }
+
+        return $this->json($results);
+    }
 }

src/AppBundle/Repository/PostRepository.php

@@ -59,4 +59,63 @@ private function createPaginator(Query $query, $page)
 
         return $paginator;
     }
+
+    /**
+     * @param string $rawQuery The search query as input by the user
+     * @param int    $limit    The maximum number of results returned
+     *
+     * @return array
+     */
+    public function findBySearchQuery($rawQuery, $limit = Post::NUM_ITEMS)
+    {
+        $query = $this->sanitizeSearchQuery($rawQuery);
+        $searchTerms = $this->extractSearchTerms($query);
+
+        if (0 === count($searchTerms)) {
+            return [];
+        }
+
+        $queryBuilder = $this->createQueryBuilder('p');
+
+        foreach ($searchTerms as $key => $term) {
+            $queryBuilder
+                ->orWhere('p.title LIKE :t_'.$key)
+                ->setParameter('t_'.$key, '%'.$term.'%')
+            ;
+        }
+
+        return $queryBuilder
+            ->orderBy('p.publishedAt', 'DESC')
+            ->setMaxResults($limit)
+            ->getQuery()
+            ->getResult();
+    }
+
+    /**
+     * Removes all non-alphanumeric characters except whitespaces.
+     *
+     * @param string $query
+     *
+     * @return string
+     */
+    private function sanitizeSearchQuery($query)
+    {
+        return preg_replace('/[^[:alnum:] ]/', '', trim(preg_replace('/[[:space:]]+/', ' ', $query)));
+    }
+
+    /**
+     * Splits the search query into terms and removes the ones which are irrelevant.
+     *
+     * @param string $searchQuery
+     *
+     * @return array
+     */
+    private function extractSearchTerms($searchQuery)
+    {
+        $terms = array_unique(explode(' ', mb_strtolower($searchQuery)));
+
+        return array_filter($terms, function ($term) {
+            return 2 <= mb_strlen($term);
+        });
+    }
 }