Refactored the feature

Author: javiereguiluz

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>

app/Resources/views/base.html.twig

@@ -37,13 +37,6 @@
                                 <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">
 
@@ -71,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>
@@ -142,15 +139,6 @@
             <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

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

@@ -0,0 +1,17 @@
+{% 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 %}

assets/js/app.js

@@ -1,13 +1,7 @@
-// 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

@@ -1,12 +1,3 @@
-/*
- * This file is part of the Symfony package.
- *
- * (c) Fabien Potencier <fabien@symfony.com>
- *
- * 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.
  *
@@ -23,7 +14,7 @@
         minQueryLength: 2,
         maxPreviewItems: 10,
         previewDelay: 500,
-        noItemsFoundMessage: 'No items found'
+        noItemsFoundMessage: 'No results found.'
     };
 
     function debounce(fn, delay) {
@@ -55,17 +46,19 @@
         }
 
         var addItemToPreview = function(item) {
-            var $link = $('<a>').attr('href', item.url).text(item.result);
-            var $li = $('<li class="list-group-item">').append($link);
+            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($li);
+            $preview.append($result);
         }
 
         var noItemsFound = function() {
-            var $li = $('<li class="list-group-item">').text(config.noItemsFoundMessage);
+            var $result = $('<div>').text(config.noItemsFoundMessage);
 
             $preview.empty();
-            $preview.append($li);
+            $preview.append($result);
         }
 
         var updatePreview = function() {

assets/js/search.js

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

src/AppBundle/Controller/BlogController.php

@@ -160,31 +160,20 @@ public function commentFormAction(Post $post)
      */
     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);
+        if (!$request->isXmlHttpRequest()) {
+            return $this->render('blog/search.html.twig');
         }
 
-        $results = [];
+        $query = $request->query->get('q', '');
+        $posts = $this->getDoctrine()->getRepository(Post::class)->findBySearchQuery($query);
 
+        $results = [];
         foreach ($posts as $post) {
-            array_push($results, [
-                'result' => htmlspecialchars($post->getTitle()),
+            $results[] = [
+                'title' => htmlspecialchars($post->getTitle()),
+                'summary' => htmlspecialchars($post->getSummary()),
                 'url' => $this->generateUrl('blog_post', ['slug' => $post->getSlug()]),
-            ]);
+            ];
         }
 
         return new JsonResponse($results);

src/AppBundle/Repository/PostRepository.php

@@ -60,8 +60,15 @@ private function createPaginator(Query $query, $page)
         return $paginator;
     }
 
-    public function findByTerms(array $terms, $limit = Post::NUM_ITEMS)
+    public function findBySearchQuery($rawQuery, $limit = Post::NUM_ITEMS)
     {
+        $query = $this->sanitizeSearchQuery($rawQuery);
+        $terms = $this->extractSearchTerms($query);
+
+        if (empty($terms)) {
+            return [];
+        }
+
         $queryBuilder = $this->createQueryBuilder('p');
 
         foreach ($terms as $key => $term) {
@@ -77,4 +84,26 @@ public function findByTerms(array $terms, $limit = Post::NUM_ITEMS)
             ->getQuery()
             ->getResult();
     }
+
+    private function sanitizeSearchQuery($query)
+    {
+        // remove all non-alphanumeric characters except whitespaces
+        return preg_replace('/[^[:alnum:] ]/', '', trim(preg_replace('/[[:space:]]+/', ' ', $query)));
+    }
+
+    /**
+     * Splits the query into terms and removes the ones which are too short.
+     *
+     * @param string $query
+     *
+     * @return array
+     */
+    private function extractSearchTerms($searchQuery)
+    {
+        $terms = array_unique(explode(' ', mb_strtolower($searchQuery)));
+
+        return array_filter($terms, function ($term) {
+            return 2 <= mb_strlen($term);
+        });
+    }
 }

webpack.config.js

@@ -16,6 +16,7 @@ Encore
     .addEntry('js/app', './assets/js/app.js')
     .addEntry('js/login', './assets/js/login.js')
     .addEntry('js/admin', './assets/js/admin.js')
+    .addEntry('js/search', './assets/js/search.js')
     .addStyleEntry('css/app', ['./assets/scss/app.scss'])
     .addStyleEntry('css/admin', ['./assets/scss/admin.scss'])
 ;