Add an instant post search

Author: voronkovich

app/Resources/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);

app/Resources/assets/scss/main.scss

@@ -63,6 +63,21 @@ header {
     .locales a {
         padding-right: 10px;
     }
+
+    // Search bar
+    .search-bar {
+        padding: 0.8em 0;
+
+        form {
+            position: relative;
+        }
+
+        .search-preview {
+            position: absolute;
+            width: 100%;
+            top: 100%;
+        }
+    }
 }
 
 // Body contents

app/Resources/translations/messages.en.xliff

@@ -239,6 +239,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="help.app_description">
                 <source>help.app_description</source>

app/Resources/translations/messages.ru.xliff

@@ -239,6 +239,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="help.app_description">
                 <source>help.app_description</source>

app/Resources/views/base.html.twig

@@ -33,7 +33,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>
@@ -47,6 +47,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">
 
@@ -149,12 +156,21 @@
                 "%kernel.root_dir%/Resources/assets/js/bootstrap-3.3.4.js"
                 "%kernel.root_dir%/Resources/assets/js/highlight.pack.js"
                 "%kernel.root_dir%/Resources/assets/js/bootstrap-datetimepicker.min.js"
+                "%kernel.root_dir%/Resources/assets/js/jquery.instantSearch.js"
                 "%kernel.root_dir%/Resources/assets/js/main.js" %}
                 <script src="{{ asset_url }}"></script>
             {% endjavascripts %}
         #}
 
             <script src="{{ asset('js/app.js') }}"></script>
+
+            <script>
+                $(function() {
+                    $('.search-bar input[name="q"]').instantSearch({
+                        noItemsFoundMessage: '{{ 'post.no_posts_found'|trans }}'
+                    });
+                });
+            </script>
         {% endblock %}
     </body>
 </html>

src/AppBundle/Controller/BlogController.php

@@ -21,6 +21,7 @@
 use Symfony\Bundle\FrameworkBundle\Controller\Controller;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\HttpFoundation\JsonResponse;
 
 /**
  * Controller used to manage blog contents in the public part of the site.
@@ -117,4 +118,47 @@ 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(' ', strtolower($query)));
+        $terms = array_filter($terms, function($term) {
+            return 2 <= strlen($term);
+        });
+
+        $posts = array();
+
+        if (!empty($terms)) {
+            $posts = $this
+                ->getDoctrine()
+                ->getManager()
+                ->getRepository('AppBundle:Post')
+                ->findByTerms($terms)
+            ;
+        }
+
+        $results = array();
+
+        foreach ($posts as $post) {
+            array_push($results, array(
+                'result' => htmlspecialchars($post->getTitle()),
+                'url' => $this->generateUrl('blog_post', array('slug' => $post->getSlug())),
+            ));
+        }
+
+        return new JsonResponse($results);
+    }
 }

src/AppBundle/Repository/PostRepository.php

@@ -12,6 +12,7 @@
 namespace AppBundle\Repository;
 
 use Doctrine\ORM\EntityRepository;
+use AppBundle\Entity\Post;
 
 /**
  * This custom Doctrine repository contains some methods which are useful when
@@ -40,4 +41,22 @@ public function findLatest()
     {
         $this->queryLatest()->getResult();
     }
+
+    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();
+    }
 }